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
}

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

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

Answer 2

no-repeat的{{1}} CSS属性background。

更改为body或repeat仅垂直重复。

CSS - 窗口高度

2 个答案: