CSS3有一个漂亮的小属性，叫做background-size:cover。

这将缩放图像，使背景区域完全被背景图像覆盖，同时保持纵横比。整个区域将被覆盖。但是，如果调整后的图像的宽度/高度太大，则部分图像可能不可见。

background-size: 100% 100%; 

拉伸背景以填充两个轴上的整个元素。

我使用了background- x CSS属性的组合来实现理想的缩放背景图像。

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

这使得背景总是覆盖整个浏览器窗口，并在缩放时保持居中。

谢谢!

但后来在谷歌Chrome和Safari浏览器上就不行了(拉伸可以，但图片的高度只有2毫米!)，直到有人告诉我缺少什么:

尝试设置高度:auto;min-height:100%;

所以根据你的身高来改变:100%;线,给:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

就在新添加的代码之前，我在Drupal Tendu themes style.css中有这样的代码:

html,身体{高度:100%;} 页面#{背景:# ffffff;高度:汽车!重要;高度:100%,最低高度:100%;位置:相对;}

然后，我必须在Drupal中创建一个新的块，同时添加class=stretch:

< img alt=“” class=“stretch” src=“pic.url” />

只是用Drupal块中的编辑器复制图片是行不通的;必须将编辑器更改为非格式化文本。

使用下面的CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

使用我提到的代码…

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

这就产生了预期的效果:只有内容会滚动，背景不会滚动。

背景图像根据浏览器视口的大小调整为任何屏幕大小。当内容不适合浏览器视口时，用户需要滚动页面，当内容滚动时，背景图像在视口中保持固定。

使用css3，这似乎会容易得多。