CSS - 窗口高度

Question

我有一个#container 元素，我有一个背景问题:

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添加背景图，页面有需要滚动的内容时，背景图只显示窗口高度的量，滚动时背景图不显示...

为什么会这样？

Answer 1

图片不随div滚动，必须设置为固定:

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

为了使图像拉伸(stretch)到 div 的大小，您可以使用 background-size: 100%;，但这是一个 css3 属性，在旧版浏览器中不起作用(IE8-)

如果容器有固定宽度，只需制作一个具有相同宽度的图像。否则，您必须实现一个 javascript 解决方案来相应地调整它的大小。