我如何使用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標籤覆蓋整個頁面的背景圖像？

回答

相關問題