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

我在Bootstrap方面不是很有经验，但我认为没有这样的功能。我建议你创建自己的“Bootstrap Theme”，一个纯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 3

首先，对于背景图片：

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

    }

Bootstrap响应背景图像

4 个答案: