如何在引导程序中将背景图像放置到容器的侧面？答案

【问题标题】：How to place background image to the sides of container in bootstrap?如何在引导程序中将背景图像放置到容器的侧面？
【发布时间】：2023-03-27 14:55:01
【问题描述】：

如何在 Bootstrap .container 的每一侧放置一个背景图像或（两个）一个，固定以便用户在容器上滚动时图像始终可见。

我被要求将图像放置在当前存在的页面的两侧，并使用类似于以下结构的引导程序实现：

<body>
  <div class="body-content">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <label>Content</label>
          </div>
        </div>
      </div>
  </div>   
</body>

由于页面使用 .container 类，内容以页面为中心，左右有空间，设计团队现在希望在每一侧显示一个图像，固定为内容被滚动。

如下图类似的结构：

我不能简单地更改 .container 中的结构，可以说将其分为 .col-md-1、col-md-10，col-md-1，因为他们希望图像只有在有足够空间的情况下才可见，所以他们希望内容占用 .container 的全部空间，就像现在一样。

我尝试了不同的方法，到目前为止我设法放置了背景图片，但它溢出了页面之外并且右侧不可见。

由于版权问题，我无法显示他们想要使用的实际图像，但是我在互联网上找到了类似的东西，您可以在this fiddle 上看到一个示例。左侧可见，但右侧在页面之外。也许我需要将图像一分为二？

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

幸运的是，您的问题很容易解决。查看 jsfiddle here 以了解如何使用 background-image 标记提供 div 背景。相关css如下。

div {
  background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
}

只需添加

overflow-y:auto

如果你想添加滚动到任何 div

【讨论】：