CSS：画像を画面全体に塗りつぶす

Question

画像を画面全体（100％x 100％）に塗る方法は？

htmlタグで100％の高さのFlex-Boxを使用していますが、何とか動作しません。

html, body { height: 100%; } 
 

 
.background-image { 
 
    background-image: url(http://placehold.it/400x400); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.logo { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<section class="background-image"> 
 
    <div class="logo"> 
 
    <h1 class="title">site-title</h1> 
 
    <h2 class="description">site-description</h2> 
 
    </div> 
 
</section>

Answer 1

あなたは、デフォルトではそれだけで、その中の子どものように背が高くなりますから、あまりにも、.background-imageクラスにheight: 100%;を追加する必要があります。うまく

html, body {height:100%;} 
 

 
.background-image { 
 
    background-image: url(http://placehold.it/400x400); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
.logo { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<section class="background-image"> 
 
    <div class="logo"> 
 
    <h1 class="title">site-title</h1> 
 
    <h2 class="description">site-description</h2> 
 
    </div> 
 
</section>