bootstrap设置背景图片的方法-创新互联

这篇文章将为大家详细讲解有关bootstrap设置背景图片的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

bootstrap怎么设置背景图片自动适应

浏览器：chrome

使用CSS：bootstrap（这个可能会影响到我们css的设置，所以还是提一下）

在设置背景图片的过程中，经常遇到背景图片不能按照自己所想的那样来自动适应屏幕，我也是尝试了很多种方法之后找到了一种适合我自身情况的设置方式。

代码如下：

body {
  background-image: url("../images/backgroundImg2.jpg");
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
}

这样，就能成功的设置body的背景图片自动适应屏幕。

但是，其他浏览器能不能兼容我还没去确认过，目前在chrome上面是可以用的。

相关属性：

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

关于bootstrap设置背景图片的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。