背景覆蓋整個屏幕

我有一個背景圖像，涵蓋了我的整個屏幕。但是，一旦我將元素添加到我的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，它會顯示相同。我該如何解決這個問題？

來源

2014-12-03 Dribel

你有什麼小提琴演示？ – 2014-12-03 10:46:08

background-size：100％100％ – aashi 2014-12-03 10:46:10

的問題不在於你的背景圖片，你應該檢查的寬度你的主包裝，並將其設置爲100％，以適應任何屏幕尺寸

來源

2014-12-03 10:47:39 Katyoshah

我知道你的意思。所以背景覆蓋整個屏幕。但是html文檔只能看到元素所在的部分，下面沒有。所以我沒有機會修復屏幕底部的任何內容？ – Dribel 2014-12-03 10:53:01

@ user3383709確實可以。我已經更新了我的答案。 – Leo 2014-12-03 11:10:50

我會做固定包裝的位置，並添加此css：

#backgroundLanding { 
    position:fixed: 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    background-size:cover; 
}

但是這意味着內容將永遠不會滾動。但我相信這是預期的效果。

此外，即使將新內容動態添加到文檔，它也會始終填滿屏幕。

來源

2014-12-03 10:50:06 lharby

如果您沒有明確提及，父級Div的高度取決於其子元素。這就是爲什麼你看到基於子元素的背景。

提到父母的必要高度。如果你想要它整個頁面，那麼你可以給背景的身體。

來源

2014-12-03 10:56:49 Bhuvana

如果你想要背景圖像填充容器，使用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%; 
}

這也是我對my own blog使用。

來源

2014-12-03 10:56:50 Leo

背景覆蓋整個屏幕

回答

相關問題