首页 >web前端 >Bootstrap教程 > 正文

bootstrap怎么设置背景图片

原创2019-07-22 13:32:43011973

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

以上就是bootstrap怎么设置背景图片的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:bootstrap
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • 快速入手BootStrap视频教程快速入手BootStrap视频教程
  • BootStrap插件讲解视频教程BootStrap插件讲解视频教程
  • BootStrap经典案例分析BootStrap经典案例分析
  • 后盾网BootStrap视频教程后盾网BootStrap视频教程
  • Bootstrap响应式网页布局篇Bootstrap响应式网页布局篇
  • 视频教程分类