如何使背景图像垂直拉伸

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

尝试使 header-image 容器相对

.row {
   position:relative;
}

Answer 2

你可以试试：

background-size: auto 100%;
background-repeat: no-repeat;

你还需要增加容器的高度。