如何拉伸背景图像以覆盖整个 HTML 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/235855/
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
How do I stretch a background image to cover the entire HTML element?
提问by Fung
I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.
我正在尝试获取 HTML 元素（body、div 等）的背景图像以拉伸其整个宽度和高度。
Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?
运气不太好。除了作为背景图像之外，它甚至可能还是我必须以其他方式来做？
My current css is:
我目前的 css 是：
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
Thanks in advance.
提前致谢。
Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.
编辑：我并不热衷于在 Gabriel 的建议中维护 CSS，所以我正在更改页面的布局。但这似乎是最好的答案，所以我将其标记为这样。
回答by Nathan
<style>
{ margin: 0; padding: 0; }
html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
回答by Kornel
Use the background-sizeproperty: http://www.w3.org/TR/css3-background/#the-background-size
使用background-size属性：http: //www.w3.org/TR/css3-background/#the-background-size
回答by Tamal Samui
In short you can try this....
总之你可以试试这个......
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
Where I have used few css and js...
我很少使用 css 和 js 的地方...
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
And it is working fine for me.
它对我来说很好用。
回答by Travis Collins
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
不确定是否可以拉伸背景图像。如果您发现它在所有目标浏览器中都不可能或不可靠，您可以尝试使用 z-index 设置较低的拉伸 img 标签，并将位置设置为绝对，以便其他内容出现在它上面。
Let us know what you end up doing.
让我们知道你最终做了什么。
Edit: What I suggested is basically what's in gabriel's link. So try that :)
编辑：我建议的基本上是加布里埃尔链接中的内容。所以试试吧:)
回答by Traingamer
To expand on @PhiLho answer, you can center a very large image (or any size image) on a page with:
要扩展@PhiLho 答案，您可以在页面上将一个非常大的图像（或任何尺寸的图像）居中：
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
或者您可以使用背景颜色与图像背景相匹配的较小图像（如果它是纯色）。这可能适合也可能不适合您的目的。
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
回答by leocborges
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
如果您需要在调整屏幕大小时拉伸背景图像并且不需要与旧浏览器版本兼容，则可以这样做：
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
回答by live-love
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
如果您有一张大的横向图像，此示例在纵向模式下调整背景大小，使其显示在顶部，底部留空：
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-image: url('myimage.jpg');
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media screen and (orientation:portrait) {
body {
background-position-y: top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
}
回答by Badar
The following code I use mostly for achieving the asked effect:
我主要使用以下代码来实现所要求的效果：
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
回答by Behnam Mohammadi
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
回答by PhiLho
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
你不能在纯 CSS 中。在所有其他组件后面覆盖整个页面的图像可能是您最好的选择（看起来这就是上面给出的解决方案）。无论如何，无论如何它看起来都会很糟糕。我会尝试使用足够大的图像来覆盖大多数屏幕分辨率（比如高达 1600x1200，高于它的更少），以限制页面的宽度，或者只是使用平铺的图像。
