我正在尝试获取 HTML 元素（body、div 等）的背景图像以拉伸其整个宽度和高度。
运气不太好。是否有可能，或者除了背景图像之外我还必须以其他方式做到这一点？
我当前的CSS是：
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
编辑：我不热衷于维护 Gabriel 建议中的 CSS，因此我正在更改页面的布局。但这似乎是最好的答案，所以我将其标记为这样。
<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>
总之你可以试试这个....
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
我使用了很少的 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>
它对我来说效果很好。
不确定是否可以拉伸背景图像。如果您发现在所有目标浏览器中这是不可能的或不可靠，您可以尝试使用拉伸的 img 标签，并将 z-index 设置为较低，并将位置设置为绝对，以便其他内容显示在其顶部。
让我们知道您最终会做什么。
编辑：我的建议基本上是加布里埃尔链接中的内容。所以尝试一下:)
要扩展@PhiLho的答案，您可以使用以下方法将非常大的图像（或任何尺寸的图像）放在页面上：
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
或者您可以使用较小的图像，其背景颜色与图像的背景相匹配（如果它是纯色）。这可能适合也可能不适合您的目的。
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
如果您需要在调整屏幕大小时拉伸背景图像，并且不需要与旧版浏览器版本兼容，这可以完成工作：
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
如果您有大型横向图像，此示例会在纵向模式下调整背景大小，使其显示在顶部，而底部留空：
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;
}
}
我主要使用以下代码来实现所要求的效果：
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
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;
它对我有用
.page-bg {
background: url("res://background");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
你不能在纯 CSS 中。在所有其他组件后面覆盖整个页面的图像可能是您最好的选择（看起来这就是上面给出的解决方案）。无论如何，很可能它看起来会很糟糕。我会尝试使用足够大的图像来覆盖大多数屏幕分辨率（例如高达 1600x1200，高于它的图像较少），以限制页面的宽度，或者仅使用平铺的图像。
图像{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0 3em 0 3em;
margin: -1.5em -0.5em -0.5em -1em;
width: absolute;
max-width: 100%;
只需将 div 设为 body 的直接子级（例如类名 bg），包含 body 中的所有其他元素，并将其添加到 CSS 文件中：
.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}
参考此链接：https://www.w3schools.com/css/css_rwd_images.asp 向下滚动到显示以下内容的部分：
- 如果背景大小属性设置为“100% 100%”，背景图像将拉伸以覆盖整个内容区域
它显示“img_flowers.jpg”拉伸到屏幕或浏览器的大小，无论您如何调整它的大小。
这是我的代码的示例：
.content{
background-image: url("SOMEURL");
background-position:center;
background-size: cover;
text-align: center; /* Center-aligns text horizontally */
justify-content: center; /* Center content horizontally */
}