css - Bootstrap 响应式背景图片

Question

如何使用 bootstrap 制作一个 div 持有者，其背景为适合访问者显示的图像？图像具有固定的高度和宽度。如果屏幕较小，应调整大小以不出现 x,y 溢出。

Answer 1

你可以这样使用background-size：

div.someclass {
  background-size: cover;
}

@Chris Coyier有一篇很好的文章展示了一些技术：http : //css-tricks.com/perfect-full-page-background-image/

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

Answer 3

我在 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;
}

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

    }