Bootstrap 3 - 超大屏幕背景图片

Question

我在为 bootstrap jumbotrons 设置背景图像时遇到问题。我的 main.css 在 bootstrap css 之后出现，我使用名为“banner”的类选择超大屏幕，该类与超大屏幕位于同一 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;
}

原文由 Brandon Gonzales 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 AAW238 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将“jumbotron-custom”添加到类属性并在“bootstrap”css 之后应用它：

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

..或者只是将 !important 添加到您的 css 的“背景图像”中。

原文由 Kangjun Heo 发布，翻译遵循 CC BY-SA 3.0 许可协议