Question

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

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

＆＃13;

  #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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您必须将背景属性分配给<body>，而不是#header，如果它应该覆盖整个页面。

Answer 2

不确定这是不是您的意思，但如果您将背景大小更改为100％，它将随页面大小而缩放。

console

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

2 个答案: