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 - 窗口高度

回答

相关问题