设置为引导列的全宽背景，这些背景仍然需要保留页面容器算法规则

Question

有两个列（第二列与其他两个列分开）。我需要为每个人设置背景，但是文本仍然需要遵循侧面页面的alingment。我正在使用bootstrap。http://www.screencast.com/t/0yxmyle76

Answer 1

您是否想通过问题复制提供的屏幕截图？如果是这样，请为每列设置背景图像，您需要：

.div {
   background-image:url(/path/to/image);
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover; //this will ensure the background image always covers the width of the div
   height: 500px; //change this to whatever height you want to set
   text-align:left; //to align text to the left of the div
}

以上是编写CSS的一种方式，您可以将速记用于背景图像样式，这是一种不那么长的缠绕方式，在样式表中编写样式：

.div {
   background: url(/path/to/image) no-repeat center top;
   background-position: cover;
   height: 500px;
   text-align:left;
}

另外，请注意，如果您要建立一个响应式站点，则可以在不同的断点上更改DIV的高度。

Answer 2

如果要使用bootstrap实现屏幕截图中的布局，则可以使用类似的东西：

https://jsfiddle.net/rejw439u/

HTML布局看起来像这样。

<div class="row">
  <div class="col-xs-8"><h1>The Contingent Workforce</h1></div>
  <div class="col-xs-4">
    <div class="col-xs-12"><h2>Heading 2 Article</h2></div>
    <div class="col-xs-12"><h2>Heading 2 Article</h2></div>
  </div>
</div>

您可以添加类似我的小提琴链接的类，以添加背景样式等。

Answer 3

感谢您的帮助，我解决了问题。

.col-sm-8 {
    height: 600px
}
.col-sm-8:after {
    content: " ";
    position: absolute;
    width: 66vw;
    height: 100%;
    bottom: 0;
    right: 0;
    background-image: url("image.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}