背景画像を縦に伸ばす方法

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

Answer 2

あなたは試すことができます：

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

また、あなたは、コンテナの高さをincreseする必要があります。