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-position: 50% 50% 或只声明 background-position:center

Answer 2

您已设置 background-attachment: fixed; - 删除它并将其设置为 background-attachment: scroll;

固定 "the background is fixed with regard to the viewport"，参见 https://www.w3schools.com/cssref/pr_background-attachment.asp - 因此得到的效果。

工作示例 fiddle 在这里：https://jsfiddle.net/robertjakobson/4ya7pyr5/4/（我将背景设置在列内的 div 上作为最佳实践）

Answer 3

背景图像是固定的 (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

Bootstrap 列的中心背景图片

Center Background Image of a Bootstrap Column

html

css

twitter-bootstrap

background-attachment