您希望仅使用一个图像就实现这一点吗?因为你可以用两张图片来做一个类似的背景拉伸。比如PNG图片。

我以前做过这个，并不难。此外，我认为拉伸只会损害背景的质量。如果你添加一个巨大的图像，它会减慢缓慢的电脑和浏览器。

这是由CSS技巧解释的:完美的全页面背景图像

演示:https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

代码:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

background-size: 100% 100%; 

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

我希望将背景图像居中并缩放，而不是将其拉伸到整个页面，并且我希望保持纵横比。这对我来说很管用，多亏了其他答案中提出的变化:

内联图片:------------------------

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

CSS ----------------------------------

html {
    height:100%;
}

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

.stretch {
    margin: auto;
    height:100%;
}

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*/
}

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

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

看起来会很漂亮。