背景覆蓋整個屏幕
[英]Background to cover entire screen
問題描述
我的背景圖片覆蓋了我的整個屏幕。 但是，一旦我將元素添加到html文件中，背景圖像將僅覆蓋此新元素的區域，其余的將變為白色。
如何確定背景在我的元素之后一直持續到屏幕底部？
#backgroundLanding {
background: url('/assets/images/landing_new4.jpg');
background-size: auto;
background-position: center center;
background-attachment: fixed;
top: 0;
}
<div id="backgroundLanding" >
<div>
<!--Flight Search Directive-->
<!--flight-search>
</div>
<!--impressum></impressum-->
</div>
</div>
如果我使用background-size：cover，它將顯示相同的內容。 我該如何解決？
4 個解決方案
解決方案1
1 2014-12-03 10:50:06
我將使包裝器的位置固定，並添加以下CSS：
#backgroundLanding {
position:fixed:
top:0;
right:0;
bottom:0;
left:0;
background-size:cover;
}
但這意味着內容永遠不會滾動。 但我相信這是理想的效果。
另外，即使將新內容動態添加到文檔中，它也始終會填滿屏幕。
解決方案2
0 已采納 2014-12-03 10:47:39
問題不在於背景圖片，您應該檢查主包裝紙的寬度並將其設置為100％以適合任何屏幕尺寸
解決方案3
0 2014-12-03 10:56:49
如果您沒有明確提及，則父Div的高度取決於其子元素。 這就是為什么您看到基於child元素的背景的原因。
向父母提及必要的身高。 如果整個頁面都需要它，則可以為正文提供背景。
解決方案4
0 2014-12-03 10:56:50
如果希望背景圖像填充容器，請使用background-size: cover; 可以達到它，並且圖像仍然保持其分辨率。
但是，看來您的問題是容器不適合瀏覽器窗口。 它將由其子節點拉伸。
@lharby提供了一種解決方案。 另一個解決方案是這樣的：
html, body {height: 100%;} /* I assume #backgroundLanding is a child node of <body> */
#backgroundLanding {
background-image: url('/assets/images/landing_new4.jpg');
background-size: cover;
height: 100%;
}
這也是我在自己的博客上使用的內容 。
使用 CSS 中的背景大小覆蓋屬性來覆蓋整個可用屏幕大小而無需左右滾動
[英]Using Background size cover property in the CSS to cover the entire available screen size without scroll left-right
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.