コンテンツがdiv内にある場合にのみ背景画像が表示されます

Question

ブラウザウィンドウ全体をカバーする背景画像を使用してdivを作成します。私はまたそれの中に内容を持つ別のdivを持っています。コンテンツdivのコンテンツにデータがいっぱい（ブラウザウィンドウをいっぱいにする）の場合、画像は完全に表示されます。 divの内容を空にすると、画像は部分的にしか見えませんでした（コンテンツdivの高さ）。コンテンツがコンテンツdivに追加されると、より多くの画像が表示されます。相続人のhtml：

<div class="whole"> 
<div class="content"> 
    <p>the more content in here, the more of the image is shown</p> 
</div> 
</div> 

はここにCSSです：

クラス全体に関係なく、コンテンツがコンテンツであるどのくらいのブラウザウィンドウ全体を取ると私はdivの中のイメージを作るにはどうすればよい

.whole { 
background: url(tree.jpg) no-repeat center center fixed; 

background-size: cover; 
width:100%; 
height:100%; 
    } 

.content { 
text-align: center; 
font-family: 'Open Sans', sans-serif; 
color: #fff; 
margin: 40px auto; 
background: rgba(22,22,22, 0.5); 
width: 100%; 
max-width: 960px; 
border-radius: 5px; 
padding-bottom: 32px; 

} 

div？おかげで、HTMLの幅と高さを設定し

Answer 1

は、

body, 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
.whole { 
 
    background: url(http://wac.2f9ad.chicdn.net/802F9AD/u/joyent.wme/public/wme/assets/ec050984-7b81-11e6-96e0-8905cd656caf.jpg?v=55) no-repeat center center fixed; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    text-align: center; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #fff; 
 
    margin: 40px auto; 
 
    background: rgba(22, 22, 22, 0.5); 
 
    width: 100%; 
 
    max-width: 960px; 
 
    border-radius: 5px; 
 
    padding-bottom: 32px; 
 
}

<div class="whole"> 
 
    <div class="content"> 
 
    <p>the more content in here, the more of the image is shown</p> 
 
    </div> 
 
</div>