我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。
我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。
在其中放置了一个img标签，然后用CSS向img标签致敬。
width:100%; height:100%;
它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。
是否有一个好的方法来做背景图像声明?
当前回答
使用我提到的代码…
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 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方法。
另外，对于搜索引擎优化，我会把背景图片放在页面的底部，但如果背景图片加载时间太长(也就是说，最初的背景是白色的)，你可以移动到页面的顶部。
实际上，您可以使用img标记实现与背景图像相同的效果。你只需要将它的z-index设置得比其他所有东西都低，设置position:absolute，并为前景中的每个盒子使用透明背景。
如果你想让内容水平居中，可以使用这样的组合:
background-repeat: no-repeat;
background-size: cover;
background-position: center;
看起来会很漂亮。
使用下面的CSS:
background: url('img.png') no-repeat;
background-size: 100%;
我使用这个，它适用于所有浏览器:
<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>
