我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。
我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。
在其中放置了一个img标签，然后用CSS向img标签致敬。
width:100%; height:100%;
它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。
是否有一个好的方法来做背景图像声明?
当前回答
我使用这个，它适用于所有浏览器:
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
<h2>Stretch that Background Image!</h2>
<p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
<p>Go on, try it - resize your browser!</p>
</div>
</body>
</html>
其他回答
如果你想让内容水平居中，可以使用这样的组合:
background-repeat: no-repeat;
background-size: cover;
background-position: center;
看起来会很漂亮。
您可以使用CSS3属性很好地做到这一点。它会根据比例调整大小，因此不会产生图像失真(尽管它会放大小图像)。请注意，它还没有在所有浏览器中实现。
background-size: 100%;
background-size: 100% 100%;
拉伸背景以填充两个轴上的整个元素。
我同意图片在绝对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方法。
另外，对于搜索引擎优化，我会把背景图片放在页面的底部，但如果背景图片加载时间太长(也就是说，最初的背景是白色的)，你可以移动到页面的顶部。
您希望仅使用一个图像就实现这一点吗?因为你可以用两张图片来做一个类似的背景拉伸。比如PNG图片。
我以前做过这个，并不难。此外，我认为拉伸只会损害背景的质量。如果你添加一个巨大的图像，它会减慢缓慢的电脑和浏览器。
