我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。
我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。
在其中放置了一个img标签，然后用CSS向img标签致敬。
width:100%; height:100%;
它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。
是否有一个好的方法来做背景图像声明?
当前回答
实际上，您可以使用img标记实现与背景图像相同的效果。你只需要将它的z-index设置得比其他所有东西都低，设置position:absolute，并为前景中的每个盒子使用透明背景。
其他回答
下面的方法对我很有效。
.back-ground {
background-image: url("../assets/background.png");
background-size: 100vw 100vh;
}
这可以在不同的维度上覆盖整个背景
下面的CSS部分应该在所有浏览器上扩展图像。
我对每个页面都动态地这样做。因此，我使用PHP为每个页面生成自己的HTML标记。所有图片都在“image”文件夹中，并以“Bg.jpg”结尾。
<html style="
background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>
如果所有页面只有一张背景图片，那么你可以删除$pic变量，删除转义反斜杠，调整路径，并将此代码放在CSS文件中。
html{
background: url(images/homeBg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}
这是在Internet Explorer 9、Chrome 21和Firefox 14上测试的。
使用我提到的代码…
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，这似乎会容易得多。
我希望将背景图像居中并缩放，而不是将其拉伸到整个页面，并且我希望保持纵横比。这对我来说很管用，多亏了其他答案中提出的变化:
内联图片:------------------------
<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%;
}
使用Backstretch插件。甚至可以有几张图片幻灯片。它也可以在容器中工作。这种方式，例如，一个可以只有背景的一部分被背景图像覆盖。
因为即使我可以让它工作，证明它是一个易于使用的插件:)。
