容器中的Bootstrap背景图像不工作

Question

我正在尝试为我的网站添加一个背景图片，使用bootstrap-4和外部css (内部css对我也不起作用)。

我正在尝试添加图像，这将是后面的所有行是在

如果我尝试将它用于容器内的行，它可以工作，但我想要所有行后面的背景，而不仅仅是一行后面的背景。

你能帮我拿一下吗？

​

.background {
    background-image: url('images/podklad.png') !important;
    height: 100%;
}

#top_part {
    /*background-color: #ff9900  !important;*/
}

<div class="container-fluid background" >
  <div class="row" id='top_part'>
    <div class="col-6" >

      <div class="d-flex text-center justify-content-center align-items-baseline">
        <h1>bla bla<br/>bla bla</h1>
      </div>
      <div class="d-flex justify-content-center">
        <button type="button" class="btn btn-primary"><h4></h4></button>
      </div>
    </div>
    
    <div class="col-6">
      <img class="img-fluid" src="images/krabicka.png" alt="">
    </div>
  </div>
  
  <div class="row" id='top_part'>
    <div class="col-12 text-center">
      <h2>bla bla</h2>
    </div>
  </div>


  <div class="row" id='top_part'>
    <div class="col-4">
      <div class="d-flex justify-content-center" id='lock_gear_heart'>
        <img src="images/lock80px.png" alt="">
      </div>
      <div class="d-flex justify-content-center" id='text_lock'>
        <h5>bla bla</h5>
      </div>
    </div>

    <div class="col-4">
      <div class="d-flex justify-content-center" id='lock_gear_heart'>
        <img src="images/gears80px.png" alt="">
      </div>
      <div class="d-flex justify-content-center" id='text_lock'>
        <h5>bla bla</h5>
      </div>
    </div>

    <div class="col-4">
      <div class="d-flex justify-content-center" id='lock_gear_heart'>
        <img src="images/heart80px.png" alt="">
      </div>
      <div class="d-flex justify-content-center" id='text_lock'>
        <h5>bla bla</h5>
      </div>
    </div>

  </div>
</div>  

​

Answer 1

看起来你的代码对我很有效。

这是我用示例图片创建的JSFiddle。你可以用你的图片替换我的示例图片。您的代码正确地将图像放置在包含所有行的容器后面。

如果您希望图像位于页面上所有内容的后面，则将CSS更改为如下所示：

body {
    background-image: url('images/podklad.png') !important;
    background-size: cover;  /* Resizes the image to cover the entire container */
}

如果没有图像显示，请确保图像路径正确。