另一个很好的解决方案是robbin的Backstretch，它可以应用于页面的主体或任何元素- http://srobbin.com/jquery-plugins/backstretch/

一句话:不。拉伸图像的唯一方法是使用<img>标记。你必须要有创造力。

在2008年，当答案写出来的时候，这曾经是正确的。如今，现代浏览器支持背景大小，这就解决了这个问题。注意，IE8不支持它。

试试这个

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

目前还没有。它将在CSS 3中可用，但要在大多数浏览器中实现还需要一段时间。

对于现代浏览器，你可以通过使用background-size来实现:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

覆盖意味着垂直或水平拉伸图像，这样它就不会平铺/重复。

这适用于Safari 3(或更高版本)、Chrome、Opera 10+、Firefox 3.6+和Internet Explorer 9(或更高版本)。

为了让它在低版本的ie浏览器中工作，可以尝试以下CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

试试文章的background-size。如果您使用以下所有选项，它将在除Internet Explorer之外的大多数浏览器中工作。

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
}