在包装器类中设置背景图像

Question

我编写这些代码并使用bootstrap制作了2个网格。现在我想在包装类中使用背景图像。我尝试了但是我没有成功。对此有何想法？

.wrapper {
  background-image: url(http://www.steamatic.com/images/footer-pattern-grey.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

<div class="wrapper">
  <div class="col-md-6">
    <div class=" flex">
      <div class="media-left"> <i class="fa fa-home fa-3x"></i></div>
      <div class="media-body">
        <h4>Resenditial Services</h4>
      </div>
    </div>
    <p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
  </div>
  <div class="col-md-6">
    <div class=" flex">
      <div class="media-left"> <i class="fa fa-building fa-3x"></i></div>
      <div class="media-body">
        <h4>Commercial Services</h4>
      </div>
    </div>
    <p class="para">We've been providing commercial clients money-saving and asset-protecting services for nearly five decades. Steamatic's full range of restoration and cleaning services means we have your business covered.</p>
  </div>
</div>

我在背景中获取图像但我想获得全宽图像我的工作？ 你可以显示我上传的图片

Answer 1

将overflow: auto;添加到.wrapper元素。

Answer 2

如果您阅读了bootstrap的文档，那么cols总是包含在row中，如果您想将它包装在您自己的.wrapper类中，那么添加

.wrapper{
  overflow: hidden;
}

或者您可以尝试float: left;到.wrapper，这是您的选择

Answer 3

您必须将overflow: hidden添加到其中两个浮动元素的.wrapper类父元素中。因此，如果您在.wrapper上添加背景图片，则会显示。因为，bootstrap网格类使用float。