html - Bootstrap 列的中心背景图像

Question

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

这是我的代码:

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;)所以它在视口(viewport)而不是列的中心。

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