敏感的Bootstrap Jumbotron背景图像

Question

我正在使用bootstrap jumbotron,并包括背景图片.调整屏幕大小使图像平铺并重复,而我希望响应地调整图像大小.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

您将如何使图像响应？该网站在这里.谢谢你的想法!

Answer 1

最简单的方法是将背景大小设置为"覆盖"

.jumbotron {
  background-image: url("../img/jumbotron_bg.jpg");
  background-size: cover;
}

史蒂夫

Answer 2

这就是我做的.
首先,只需覆盖jumbotron类,然后执行以下操作:

.jumbotron{
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

所以,现在你有一个具有响应背景的jumbotron.但是,正如Irvin Zhan已经回答的那样,背景的高度仍未正确显示.

你可以做的一件事是用你的div填充一些空格,例如:

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

或者,更优雅的是,您可以设置容器的高度.您可能希望添加另一个类,以便不覆盖Bootstrap容器类.

<div class="jumbotron">
    <div class="container push-spaces">
        About
    </div>
</div>

.push-spaces
{
    height: 100px;
}

Answer 3

这就是我的做法：

<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  <h1>Hello</h1>
</div>

Answer 4

你可以试试这个：

只需将代码放在 html 文件头部的 style 标签中

<style>
        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }
</style>

或者把它放在一个单独的 css 文件中，如下所示

        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }

使用center center将图像水平和垂直居中。使用cover使图像填满jumbotron空间，最后no-repeat，使图像不重复。

Answer 5

我发现这对我很有用:

.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}

您可以调整屏幕大小,它总是占用窗口的100%.

Answer 6

不幸的是，没有办法让div 高度响应背景大小。我使用过的最简单的解决方案是在包含该背景图像的大屏幕中添加一个 img 标签。