CSS - 窗口高度

我有一個#container的元素，我有一個背景問題：CSS - 窗口高度

html { 
    font-family: Arial, sans-serif; 
    height:100%; 
} 


body{ 
    margin: 0 auto; 
    padding: 0; 
    font-size: 12px; 
    height:100%; 
    background:url(/_images/body-bg.jpg) top center no-repeat; 
    /*background:#0068b3; 
    background: -webkit-gradient(linear, left top, left bottom, from(#bfd9ed), to(#0068b3)); 
    background: -moz-linear-gradient(top, #bfd9ed, #0068b3); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd9ed', endColorstr='#0068b3')*/ 

} 

#container { 
    width:995px; 
    margin: 0 auto; 
    padding: 0; 
    height:100%; 
    position:relative; 

}

當我添加背景圖像的#container，並且頁面有需要滾動的內容，背景圖片只顯示窗口高度的數量，當你滾動背景圖片時不顯示...

爲什麼會這樣？

來源

2011-04-28 tony noriega

嘗試刪除'height：100％; ' – 2011-04-28 17:21:27

嘗試刪除'no-repeat' – 2011-04-28 17:22:14

您有no-repeat的background CSS屬性body。

更改爲repeat或repeat-y只能垂直重複。

來源

2011-04-28 17:26:06

要將圖像不與DIV滾動，我必須將其設置爲固定：

#container { 
    background:url('img.png') top left no-repeat; 
    background-attachment:fixed; //this will avoid scroll 
}

爲了使圖像伸展到該div的大小，你可以使用background-size: 100%;，但這是css3屬性，並且不適用於舊版瀏覽器（IE8-）

如果容器將具有固定寬度，則只需製作具有相同寬度的圖像即可。否則，您必須實施JavaScript解決方案才能相應調整其大小。

來源

2011-04-28 17:30:33 Andre

CSS - 窗口高度

回答

相關問題