twitter-bootstrap - 如何在 Bootstrap 3/4 中创建响应式壁纸广告？

Question

我正在尝试将墙纸广告添加到看起来像图片上给出的内容的网站。我尝试使用 background-size:100% auto 基于来自 here 的类似问题，我什至尝试将容器放入容器流体中，但布局不合适。要求是让图片 float 到内容上，直到with小于991，布局发生变化。我知道其他一些框架有这方面的类，但我就是不能让它工作。

我尝试过的例子:

这只适用于非常大的屏幕。

html, body {
  background:url(images/static/rollup_web.png) no-repeat center center   fixed;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
}

<div class="container">
   @yield('content')
</div>

这产生与前面代码几乎相同的效果:

background-size:100% auto;

这真是一个 hack，我得到的结果还不错，但是图像太小了，如果我展开左右两列，我的内容就会被尖叫得太多:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-1">
      <!--Left Image of the wallpaper --> 
    </div>

    <div class="col-sm-10">
      @yield('content')
    </div>

    <div class="col-sm-1">
      <!--Right Image of the wallpaper --> 
    </div>
  </div>
</div>

Answer 1

如果有人遇到类似的问题，我已经设法在不破坏 Bootstrap 网格和几行 CSS 的情况下解决了它。该解决方案需要在 Photoshop 中准备好图像，其中图像的中间实际上是容器宽度为 1126px 的空白区域。将图片放在容器外

<div class="wallpaper-ad"> </div>

<div class="container">
   <div class="row"> 
      <!-- Content goes here --> 
   </div> 
</div>

它的风格是:

.wallpaper-ad {

    background: url(../images/static/image.png) no-repeat center center scroll;
    height:1300px; /* Depends on the image */
    width: 100%;
    position: absolute;
    z-index: -999;
}

@media only screen and (max-width:991px) { 
    .wallpaper-ad {
        display: none;
    }
}