使背景圖像可縮放到窗口

讓我想想，我該如何解釋我的問題。我有一個有很多div層的滾動頁面...一個在另一個之下！他們背景圖像有1920x1080像素的分辨率！但他們應該填寫完整的後臺瀏覽器窗口。例如，當縮放瀏覽器窗口時，圖片應該自行縮放。使背景圖像可縮放到窗口

我見過一些jquery插件，他們做得非常好，但對我來說重要的是backgroundimage是在css中定義的，因爲我使用inview.js並嘗試創建視差效果。這可能嗎？

感謝泰德

2013-02-03 supersize

您可以使用background-size: cover這雖然是一個CSS3屬性和一些瀏覽器不支持它。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

編輯：的CSS Tricks

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-02-03 12:13:11

使用css3對我來說沒問題。它的作品，但現在的問題與背景圖像之間的差距......我不知道爲什麼... http://i.imagebanana.com/img/wj3z04kc/Bildschirmfoto20130203um13.38.19.png – supersize

驗證圖像實際上填充元素。一個突出檢查員的元素將幫助你解決這個問題。如果它不是圖像，它可以是任何數量的東西（定位，如果它們是相對的，則爲邊距）。 –

謝謝，這是我的錯，因爲利潤... :)它的工作！ – supersize

一個前綴和備用解決方案禮貌嘗試......

html, body{ 
padding:0px; 
margin:0px; 
}

然後，做出超圖像工作大型顯示器（即：多屏幕等），將其從<img>中縮放並設置較低的z-index。

.background{ 
width:100%; 
height:100%; 
position:fixed; 
top:0px; 
left:0px; 
z-index:0; 
} 


<img src="background.jpg" class="background">

更改background.jpg你的背景圖片&把<img>標籤頁面的底部，所以它加載最後。如果它不顯示在正確的級別（即：覆蓋其他元素），你可能必須玩Z指數

來源

2013-02-03 14:05:19 user1145643

使背景圖像可縮放到窗口

回答

相關問題