Bootstrap响应式背景图片

Question

如何使用Bootstrap制作一个div容器，使其背景图像适合访问者的显示屏？ 图像具有固定的高度和宽度。 如果屏幕较小，则应调整大小以避免x，y溢出。

- kakuki

Answer 1

您可以这样使用 background-size：

div.someclass {
  background-size: cover;
}

这里有一篇很好的文章来自@Chris Coyier，展示了几种技巧：http://css-tricks.com/perfect-full-page-background-image/

- pzin

Answer 2

首先，关于背景图片：

div.someclass{ 
 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;
}

这将使您的背景图片具有响应性，即它会根据页面所在显示器的大小适配。

其次，为了使主表单内容在任何设备上都具有适当的顶部边距，需要在刚刚创建的用于主要内容的div上设置相对顶部边距。

div.someclass{
 margin-top:5%;
}

根据您的需求将上述5%更改。

- Pranav Pandey

---

background-size 和 -webkit-background-size 之间有什么区别？ - ElSheikh

@ElSheikh 这是为了支持不同的浏览器 - webkit 是为 Safari 和其他基于相同内核的浏览器而设计的，moz 是为火狐浏览器而设计的，o 是为 Opera 浏览器而设计的。 - Pranav Pandey

Answer 3

我不是很熟悉Bootstrap，但我认为它没有这样的功能。我建议您创建自己的“Bootstrap主题”，即一个纯CSS或LESS文件来自定义您的背景。

您可以简单地使用：

body
{
    background: url(https://www.google.hu/images/srpr/logo4w.png);
    background-size: cover;
}

这段代码会在两个方向上拉伸您的背景图像，但会剪切图像的某些部分，除非屏幕比例与图像比例相同。

body
{
    background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed;
    background-size: cover;
}

- kdani

Answer 4

这个对我有用：

body{
        background-image: url('../url') ;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height:100%;

    }

- user4773260