全寬度背景響應網站

我遇到了一個問題，我不能完全弄清楚如何解決使用CSS只。全寬度背景響應網站

在響應的網頁我有每一頁上全寬背景下，以下CSS加載到一個div類（BG）：

.bg{ 
    position:fixed; 
    top:0px; 
    z-index:-999; 
    width:100%; 
    height:100%; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    }

問題不過是，這些圖像將如果頁面內容很長，則會在移動設備上造成問題。（背景將展開以涵蓋所有頁面內容，甚至是屏幕外的內容），這意味着我通常只會在背景中看到我背景左上角的污跡。

因爲我還需要這是有點向後兼容（IE 8+）我不能CSS3的「蓋」只能靠所以我已經用完了免費腳本的解決方案。

任何提示/想法將大大appriciated！

來源

2013-04-11 user2269500

這裏有一個可調整大小的背景一個不錯的文章http://css-tricks.com/how-to-resizeable-background-image/ – 2013-04-11 09:02:52

嘗試使用媒體查詢：http://www.w3.org/TR/css3- mediaqueries /這些在IE8中將被忽略，但您可以使用它們在移動設備上縮小圖像。 – gaynorvader 2013-04-11 09:05:59

@gaynorvader：當調整圖像，並使用媒體查詢我將不得不補償頁面的高度，這將是不可能的，因爲內容是動態的，從而高度變化。（它也改變取決於屏幕大小） – user2269500 2013-04-11 09:12:26

你可以嘗試使用一個CSS元素在身上的標籤，像這樣

#background {
背景圖像：網址（ 'URL /到/圖像/ choice.jpg的/'）;
background-repeat：repeat-y;
}

這是所有在CSS1所以它應該是向後兼容。
您可以將此添加到您的bg或其他選擇的課程或ID中。

來源

2013-04-19 13:10:52 dragonloverlord

全寬度背景響應網站

回答

相關問題