文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在引导中将背景图像放置到容器的两侧？

问如何在引导中将背景图像放置到容器的两侧？
EN

Stack Overflow用户

提问于 2018-03-15 22:21:03

回答 1查看 1.1K关注 0票数 4

我如何放置一个背景图像，或(2)，一个在引导.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 1，col md-10，col md-1，因为他们希望只有在有足够空间的情况下才能看到图像，他们希望内容能够像现在一样占用.container的全部空间。

我尝试了不同的东西，到目前为止，我设法放置一个背景图像，但它溢出到页面之外，右侧是不可见的。

由于版权问题，我无法显示他们想要使用的实际图像，但是我在互联网上发现了类似的东西，你可以在这把小提琴上看到一个例子。左边是可见的，但是右边在页面之外。也许我需要把图像分割成两半？

html

css

twitter-bootstrap-3

回答 1

Stack Overflow用户

发布于 2018-03-15 22:34:54

幸运的是，你的问题很容易解决。查看一下jsfiddle 这里，看看如何使用背景图像标记提供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中

票数 -3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49310167

复制

相似问题

问如何在引导中将背景图像放置到容器的两侧？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导中将背景图像放置到容器的两侧？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导中将背景图像放置到容器的两侧？
EN