94

我正在尝试获取 HTML 元素（body、div 等）的背景图像以拉伸其整个宽度和高度。

运气不太好。除了作为背景图像之外，它甚至可能还是我必须以其他方式做到这一点？

我目前的CSS是：

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

提前致谢。

编辑：我不热衷于维护 Gabriel 建议中的 CSS，所以我改为更改页面的布局。但这似乎是最好的答案，所以我将其标记为这样。

4

13 回答 13

203 
<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>
于 2011-03-16T20:21:03.050 回答
14

使用background-size属性：http ://www.w3.org/TR/css3-background/#the-background-size

于 2009-07-09T12:52:34.810 回答
9

总之你可以试试这个......

<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>

它对我来说很好。

于 2013-05-07T10:44:27.727 回答
6

不确定是否可以拉伸背景图像。如果您发现它在所有目标浏览器中都不可能或不可靠，您可以尝试使用拉伸的 img 标签，将 z-index 设置为较低，并将 position 设置为 absolute，以便其他内容显示在其顶部。

让我们知道你最终会做什么。

编辑：我的建议基本上是加布里埃尔链接中的内容。所以试试吧:)

于 2008-10-25T03:50:51.430 回答
5

要扩展@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; 
}
于 2008-10-27T19:09:49.583 回答
5

如果您需要在调整屏幕大小时拉伸背景图像并且不需要与旧浏览器版本兼容，则可以使用：

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
于 2016-12-22T16:48:08.353 回答
3

如果你有一个大的横向图像，这个例子在纵向模式下调整背景的大小，使它显示在顶部，在底部留空：

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;
    }
}
于 2015-06-12T19:50:39.333 回答
3

我主要使用以下代码来实现所要求的效果：

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
于 2015-07-09T14:33:29.243 回答
2 
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;
于 2014-03-04T08:46:14.707 回答
1

这个对我有用

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
于 2020-05-28T16:21:45.377 回答
0

你不能在纯 CSS 中。在所有其他组件后面有一个覆盖整个页面的图像可能是你最好的选择（看起来这就是上面给出的解决方案）。无论如何，它看起来很糟糕。我会尝试使用足够大的图像来覆盖大多数屏幕分辨率（比如高达 1600x1200，高于它更稀缺），以限制页面的宽度，或者只是使用平铺的图像。

于 2008-10-25T14:15:48.230 回答
0

图片{

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%;
于 2020-02-21T23:19:14.413 回答
0

只需将 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 向下滚动到显示以下内容的部分：

  1. 如果 background-size 属性设置为“100% 100%”，则背景图像将拉伸以覆盖整个内容区域

无论您如何调整它，它都会显示“img_flowers.jpg”拉伸到屏幕或浏览器的大小。

于 2020-04-28T22:16:23.113 回答