2012-03-29 77 views
1

我目前有一個完整的封面背景圖片。完成封面背景圖片問題

下面是代碼:

#back{ /* #back is a div */ 
    position:absolute; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:-1; 

    background: url(images/bg.jpg) no-repeat center center fixed; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')"; 
} 

這似乎運作良好,但我在裏面發現了一個故障,我希望有人能幫助我。

如果我將瀏覽器窗口大小從底部減少到我的頁面的一半,然後使用瀏覽器的滾動條向下滾動,則不會出現背景。

我留下的東西,看起來像下面的圖片

image after scrolling

有沒有我可以解決這個問題的方法嗎?我希望背景圖像能夠涵蓋所有情況。

回答

1

這不是background-size:cover的問題。它的position:absolute

入住這http://jsfiddle.net/8b27V/

+0

那麼,如何解決這問題? – 2012-03-29 09:00:48

+0

其實從來沒有。位置是:固定;做的伎倆。感謝您將我的錯誤指向我!我顯然看錯了地方 – 2012-03-29 09:06:53

+0

正如我所說,它需要的位置:固定的工作。您的解決方案似乎可行,但只要添加了滾動需求(即固定高度的內容框),它仍然會發生。 http://jsfiddle.net/8b27V/1/試試吧。 – 2012-03-29 09:25:00