I have this question in mind for a while. When I make a full background image, on mobile, there is always a white space between `<div>`, This happens when my image height reaches its full height.

[Refer Here](http://www.bootply.com/vhgFHpT2Ii)

[![White Space](https://i.stack.imgur.com/3oFtF.png)](https://i.stack.imgur.com/3oFtF.png)

As you can see at the bootply, I'm trying to include some filter to the image, so I have to make the separate CSS for that background image.

How to make the background image fill up all the way vertically too?

My 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;
}

```

My 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>

```