Bootstrap 列的中心背景图像

Question

我想将第二个 Bootstrap 列的背景图像放在列的中心。然而，现在它位于整个视图的中心，而不是列的中心。

这是我的代码：

HTML：

<div class="container-fluid cust-main-container">
  <div class="row">
    <div class="col-sm-2">
      <!-- [..] -->
    </div>
    <div class="col-sm-10 bg">
      <!-- [..] -->
    </div>
  </div>
</div>

CSS：

* {
    height: 100%;
} //In my actual code, * is html, body

.cust-main-container,
.cust-main-container > .row {
    height: 100%;
}

.bg{
    background: url('http://placehold.it/150x350');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.col-sm-2 {
  border: 1px solid blue;
}

.col-sm-10 {
  border: 1px solid green;
}

这是一个jsfiddle：https://jsfiddle.net/1m8ua78z/

Answer 1

背景图像是固定的( background-attachment: fixed;)，因此它位于视口而不是列的中心。

的宽度col-*-2为16.6666%，宽度col-*-10为83.3333%。因此，.bg 的位置需要是：16.6666%+(83.3333%/2) 或...

background-position: 58.33325% center;

由于响应能力，您只想在小屏幕上垂直堆叠之前应用此功能。

@media (min-width: 768px) {
    .bg{
        background-position: 58.33325% center;
    }
}

http://www.codeply.com/go/5GG6v3rkZ3