twitter-bootstrap - 如何让背景图片垂直拉伸(stretch)

Question

这个问题我想了一会儿。当我在移动设备上制作完整的背景图像时， <div> 之间总是有一个空格。 ，当我的图像高度达到其最大高度时，就会发生这种情况。

Refer Here

正如您在 bootply 中看到的，我试图在图像中包含一些过滤器，因此我必须为该背景图像制作单独的 CSS。

如何让背景图像也垂直填满？

我的CSS

/* CSS used here will be applied after bootstrap.css */
.header-image{
    background-image: url("http://treestudio.web.id/images/header-img.jpg");
    background-position: center;

    -webkit-background-size: cover;
    background-size: cover;

    -webkit-filter: contrast(0.5);
    filter: contrast(0.5);

    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.header-content{
    color: #fff;
    text-shadow: 0px 0px 1px black;
    text-align: center;
    padding-top: 250px;
    padding-bottom: 250px;
}

我的 HTML

<div class="container-fluid">
  <div class="row">
    <div class="header-image">
    </div>
    <div class="col-md-12 header-content">
      <h1>Web Title</h1>
    </div>
  </div>
  <div class="row bg-warning">
    <div class="col-md-12 header-content">
      Another centered
    </div>
  </div>
</div>

Answer 1

尝试使标题图像容器相对

.row {
   position:relative;
}