如何使背景图像垂直拉伸

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;

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