我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。
我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。
在其中放置了一个img标签，然后用CSS向img标签致敬。
width:100%; height:100%;
它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。
是否有一个好的方法来做背景图像声明?
当前回答
background-size: 100% 100%;
拉伸背景以填充两个轴上的整个元素。
其他回答
实际上，您可以使用img标记实现与背景图像相同的效果。你只需要将它的z-index设置得比其他所有东西都低，设置position:absolute，并为前景中的每个盒子使用透明背景。
您希望仅使用一个图像就实现这一点吗?因为你可以用两张图片来做一个类似的背景拉伸。比如PNG图片。
我以前做过这个，并不难。此外，我认为拉伸只会损害背景的质量。如果你添加一个巨大的图像，它会减慢缓慢的电脑和浏览器。
您可以使用border-image: yourimage属性将图像缩放到边界。即使你给出了背景图像，边界图像也会被绘制在它上面。
如果你的样式表是在不支持css3的地方实现的，border-image属性是非常有用的。如果你使用谷歌Chrome或Firefox，那么我推荐使用background-size:cover属性本身。
我同意图片在绝对div 100%的宽度和高度。确保在CSS中为主体设置100%的宽度和高度，并将边距和填充设置为零。使用此方法您将发现的另一个问题是，在选择文本时，选择区域有时会包含背景图像，这具有使整个页面具有所选状态的不幸效果。你可以通过使用user-select:none CSS规则来解决这个问题，如下所示:
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
width: 100%
margin: none;
padding: none;
}
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -99999;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#background img {
width: 100%;
height: 100%;
}
#main{ z-index:10;}
</style>
</head>
<body>
<div id="main">
content here
</div>
<div id="background"><img src="bg.jpg"></div>
</body>
</html>
同样，ie浏览器在这里是坏人，因为它不识别用户选择选项-甚至Internet Explorer 10预览也不支持它，所以你可以选择使用JavaScript来阻止背景图像选择(例如，http://www.felgall.com/jstip35.htm)或使用css3 background-stretch方法。
另外，对于搜索引擎优化，我会把背景图片放在页面的底部，但如果背景图片加载时间太长(也就是说，最初的背景是白色的)，你可以移动到页面的顶部。
我希望将背景图像居中并缩放，而不是将其拉伸到整个页面，并且我希望保持纵横比。这对我来说很管用，多亏了其他答案中提出的变化:
内联图片:------------------------
<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%;
}
