Question

我无法为bootstrap jumbotrons设置背景图像。我的main.css是在bootstrap css之后，我选择了一个名为＆＃34; banner＆＃34;的班级的jumbotron。这与jumbotron在同一个div中，但它仍然无法工作。这是我的代码......

HTML：

  <!-- Banner -->
  <div class="jumbotron banner">
    <div class="container">
      <hgroup>
        <h1>
          Bits king
        </h1>
        <h2>
          Web Design &amp; Development
        </h2>
      </hgroup>
    </div>
</div>

CSS：

 .banner {
  height: 400px;
  width: 100%;
  max-height: 50%;
  max-width: 100%;
  min-height: 20%;
  min-width: 30%;
  background-image: url("../assets/images/banner.jpeg");
  background-size: cover;
}

Answer 1

您可以在自定义css文件中的background-image类中添加.jumbotron属性（确保在 Bootstrap之后引用自定义css文件。以下是一个示例：< / p>

.jumbotron {
    background-image: url("/img/your-image.jpg");
    background-color: #17234E;
    margin-bottom: 0;`enter code here`
    min-height: 50%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}

Answer 2

添加＆＃34; jumbotron-custom＆＃34; to class attribute并在＆＃34; bootstrap＆＃34;之后应用它。 css：

.jumdotron-custom
{
    background: url('/*background url*/') no-repeat !important;
}

..或者只是添加！重要的是你的＆＃39; background-image＆＃39; of css。

Answer 3

早上好。试试这个：

background-image: url("../assets/images/banner.jpg");

让我知道它是否有效？

Bootstrap 3 - Jumbotron背景图像

3 个答案: