如果你想让内容水平居中，可以使用这样的组合:

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

看起来会很漂亮。

使用我提到的代码…

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，这似乎会容易得多。

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

您可以使用border-image: yourimage属性将图像缩放到边界。即使你给出了背景图像，边界图像也会被绘制在它上面。

如果你的样式表是在不支持css3的地方实现的，border-image属性是非常有用的。如果你使用谷歌Chrome或Firefox，那么我推荐使用background-size:cover属性本身。

实际上，您可以使用img标记实现与背景图像相同的效果。你只需要将它的z-index设置得比其他所有东西都低，设置position:absolute，并为前景中的每个盒子使用透明背景。

如果你想让内容水平居中，可以使用这样的组合:

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

看起来会很漂亮。