如何将背景图片拉伸以覆盖整个HTML元素？

Question

如何将背景图片拉伸以覆盖整个HTML元素？

99

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

没有太多运气。这是否可能，还是我必须以背景图像之外的其他方式完成它？

我的当前 CSS 代码为：

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

编辑：我不想维护Gabriel建议中的CSS，所以我改变了页面的布局。但那似乎是最好的答案，所以我标记它为这样。

- fung

当然，你可以使用JavaScript来动态完成，但这可能比gabriel1836链接所建议的CSS hacks还要糟糕。 - Jason Bunting

为了保留图像的纵横比，您应该使用"background-size：cover;"或"background-size：contain;"。我已经编写了一个在IE8中实现这些值的polyfill：http://github.com/louisremi/background-size-polyfill - Louis-Rémi

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Metehan Akça · Answer 1

这是我代码中的一个例子：

.content{
  background-image: url("SOMEURL");
  background-position:center;
  background-size: cover;

  text-align: center; /* Center-aligns text horizontally */
  justify-content: center; /* Center content horizontally */

}

- PhiLho · Answer 2

在纯CSS中是无法实现的。在所有其他组件后面放置一个覆盖整个页面的图像可能是最好的选择（似乎上面提供了这个解决方案）。不管怎样，很有可能看起来很糟糕。我建议可以尝试使用一个足够大以覆盖大多数屏幕分辨率的图像（例如高达1600x1200，超过这个分辨率就会更少），或者只使用一个可以平铺的图像来限制页面的宽度。

- Ebele Nwaelene · Answer 3

图像{

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

- Salah Ayman · Answer 4

只需创建一个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 向下滚动到以下部分：

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

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