使背景圖像100％的視口

我一直在尋找一種解決方案，使我的開放背景圖像是100％的視口，並在這裏使用喬希powel的答案Page height to 100% of viewport?它適用於Mac上的鉻，但沒有任何其他瀏覽器（在Mac或Windows上）當我說'它可以在Mac上使用chrome'時，它在大多數情況下都可以使用，但是如果我將瀏覽器拉得太高，它不適合覆蓋，我會看到我的下一部分內容它就像它僅適用於高度爲X ...使背景圖像100％的視口

這裏是我的代碼：

<section class="intro"> 
<div class="intro-body"> 
</div> 
</section> 




.intro { 
display: table; 
width: 100%; 
height: 100%; 
padding: 350px 0 330px; 
text-align: center; 
color: #fff; 
position: relative; 
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center; 
background-size:cover; 
} 




.intro-page { 
padding: 150px 0 130px; 
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center; 
background-size: cover; 
} 

function windowH() { 
var wH = $(window).height(); 

$('.intro, .intro-page').css({height: wH}); 
}

小提琴這裏http://jsfiddle.net/9h98f/1/

如果任何人都可以擺脫任何光線，那會很棒。

來源

2014-04-11 jfar_magnetik

爲了使頁面的元素100％的高度，你還必須有：

html,body { height: 100%; min-height: 100%; }

這是更好的，更可靠地做到這一點在CSS不是使用JS。

或者，您可以將背景圖像放在主體上（使用background-size: cover，就像您使用的一樣）。

來源

2014-04-11 16:28:30 Adam

對不起，我其實已經有了，現在我已經更新了我的jsfiddle http://jsfiddle.net/9h98f/3/ –

回覆您的其他選項，'或者，您可以將背景圖片放在身體'我給了這個去，現在這個工程現在鉻和Safari瀏覽器，但仍然沒有在IE瀏覽器，FF或CHROME（Windows） –

加上偉大的移動，我不知道這是我的電腦玩餅乾/緩存。我在所有的Windows瀏覽器上都刪除了緩存 –

使背景圖像100％的視口

回答

相關問題