Twitter bootstrap 如何在Bootstrap 3/4中创建响应性壁纸广告？

我试图添加墙纸广告到一个网站上，看起来像图片上给出的东西。我尝试过使用背景大小：100%自动基于类似的问题，我甚至尝试过将容器放入容器流体中，但布局不适合。要求将图像浮动到内容上，直到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>

这是一个相当不错的技巧，我得到的结果还行，但图像太小，如果我展开左右列，我的内容就会尖叫得太厉害：

<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>

@产量（‘含量’）

使用jQuery库，如

---

如果有人发现类似的问题，它们的功能足够强大，在任何屏幕的背景上都有一个响应速度很快的图像。我已经设法解决了这个问题，而没有破坏引导网格，也没有几行CSS。该解决方案需要在PS图象处理软件中有一个准备好的图像，其中图像的中间实际上是容器宽度为1126px的空白空间。将图像放在容器外部

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

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

---

你有你使用的HTML/CSS代码的例子吗？我添加了代码例子，尽管我已经清楚地说明了我在试图解决这个问题时使用的两个概念。我真的看不出因为这个问题而否决这个问题的意义。

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