我如何使用div标签覆盖整个页面的背景图像？

-2

这将是我在Stackoverflow上的第一个问题，而且我对前端开发不是很有经验。我试图获得一个背景图像来覆盖整个页面，并使用div标签进行响应。我已经搜索了很多不同的解决方案，似乎没有任何工作，我迫切需要帮助。我如何使用div标签覆盖整个页面的背景图像？

这里是链接到该网站，所以你可以看到它现在的样子 http://mywebbapp170201.azurewebsites.net/

#header { 
 
background-color: lightpink; /*Placeholder for now*/ 
 
background-image: url('Content/Pictures/weddingpicture.png'); 
 
background-position: center top; 
 
background-repeat: no-repeat; 
 
background-size: cover; 
 
max-width: none; 
 
padding-bottom: 5vw; 
 
margin-bottom: 10vh; 
 
background-attachment: fixed; 
 
}

<header id="header"> 
 
<div id="headerBanner"> 
 
    <div><button type="button" id="closeBanner"><span class="fa fa-2x fa-times-circle"></span></button> <span id="bannerText">Är du en utställare? <a href="~/Home/ExhibitorsInfo">Klicka här!</a></span></div> 
 
</div> 
 
<div id="headerText"> 
 
    <h2 class="text">Välkommen till</h2> 
 
    <h1 class="highlight">Bröllopsfeber!</h1> 
 
</div> 
 
<div id="headerDownBtn"> 
 
    <div class="chevron" id="chevronStatic"> 
 
     <a href="#down" target="_top"><span class="fa fa-3x fa-angle-down highlight"></span></a> 
 
    </div> 
 
</div> 
 
</header>

来源

2017-03-15 asd

你必须指定背景属性的<body>，不#header，如果它应该覆盖整个页面。

来源

2017-03-15 12:36:23 Johannes

不知道这是不是你的意思，但如果你改变背景大小为100％，它会随着页面大小而缩放。

#header { 
background-size: 100% auto; 
}

来源

2017-03-15 12:42:13

我如何使用div标签覆盖整个页面的背景图像？

回答

相关问题