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>

您如何才能使图像响应？ The site is HERE。谢谢你的想法！

Answer 1

最简单的方法是将背景大小设置为＆＃34; cover＆＃34;

.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

我发现这对我来说非常有用：

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

您可以调整屏幕大小，它总是占据窗口的100％。

Answer 4

TLDR：使用background-size: 100% 100%;。

background-size: cover;可能会切断图像的某些部分，从而产生不良效果。

使用background-size: 100% 100%;，您可以强制图片占据100%和height的父元素width。

有关详细信息，请参阅W3Schools。

这是一张有效的，响应迅速的jumbotron背景图片：

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

Answer 5

我就是这样做的：

＆＃13;

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

＆＃13;

Answer 6

不幸的是，没有办法制作div height respond to the background-size。我使用的最简单的解决方案是在您的jumbotron中添加一个包含该背景图像的img标签。

Answer 7

以下代码适用于所有屏幕：

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

封面属性会调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从其中一个边缘切掉一点。

Answer 8

您可以尝试以下方法：

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

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

使用居中居中将图像水平和垂直居中。使用 cover 使图像填充超大空间，最后不重复，以使图像不再重复。

敏感的Bootstrap Jumbotron背景图像

8 个答案: