Html 让背景图像“拉伸以适应”我页面的背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9653475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Have background-image "stretch to fit" the background of my page
提问by Silas
I have an image I would like to use as a background image but I need the height of it to stretch to fit 100% from header to footer, and then I can drop a background-color:black; behind it to make it perfect.
我有一个图像我想用作背景图像，但我需要它的高度从页眉到页脚拉伸以适应 100%，然后我可以删除背景颜色：黑色；在它后面使它完美。
Is there any way to do this? Currently I am trying to use this CSS:
有没有办法做到这一点？目前我正在尝试使用这个 CSS：
#wrapper .bg{
background: url(../images/sky.png) no-repeat;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:block;
z-index:-1;
}
This ends up leaving some space between the image and the footer, the same amount I am guessing as if the image wasn't there.
这最终会在图像和页脚之间留下一些空间，我猜测的数量与图像不存在一样。
采纳答案by AlienWebguy
No, what you need to do is add an image tag inside the body and set the height to 100%. Apply any z-index tweaks with CSS so it remains behind your content.
不，您需要做的是在 body 内添加一个图像标签并将高度设置为 100%。使用 CSS 应用任何 z-index 调整，使其保留在您的内容之后。
回答by
If you aren't supporting older browsers you can use css3 to achieve this.
如果您不支持旧浏览器，您可以使用 css3 来实现这一点。
body {
background-image: url(myimage.png);
background-size: cover;
}
