Html 背景图像仅在内容位于div中时显示

我希望我的div和背景图像覆盖整个浏览器窗口。我还有另一个div，里面有内容。当content div中的内容充满数据（即填满浏览器窗口）时，图像将完全显示。当我清空div的内容时，图像仅部分可见（contentdiv的高度）。随着内容被添加到content div，图像会显示更多内容。以下是html：

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

---

如何使整个类的div中的图像占据整个浏览器窗口，而不管contentdiv中有多少内容？谢谢

设置html的宽度和高度

body，
html{
身高：100%；
宽度：100%；
保证金：0；
}
.全部{
背景：url(http://wac.2f9ad.chicdn.net/802F9AD/u/joyent.wme/public/wme/assets/ec050984-7b81-11e6-96e0-8905cd656caf.jpg?v=55)无重复中心固定；
背景尺寸：封面；
宽度：100%；
身高：100%；
}
.内容{
文本对齐：居中；
字体系列：“开放式Sans”，无衬线；
颜色：#fff；
利润率：40px自动；
背景：rgba（22,22,22,0.5）；
宽度：100%；
最大宽度：960像素；
边界半径：5px；
填充底部：32px；
}

这里的内容越多，显示的图像就越多

设置html的宽度和高度

body，
html{
身高：100%；
宽度：100%；
保证金：0；
}
.全部{
背景：url(http://wac.2f9ad.chicdn.net/802F9AD/u/joyent.wme/public/wme/assets/ec050984-7b81-11e6-96e0-8905cd656caf.jpg?v=55)无重复中心固定；
背景尺寸：封面；
宽度：100%；
身高：100%；
}
.内容{
文本对齐：居中；
字体系列：“开放式Sans”，无衬线；
颜色：#fff；
利润率：40px自动；
背景：rgba（22,22,22,0.5）；
宽度：100%；
最大宽度：960像素；
边界半径：5px；
填充底部：32px；
}

这里的内容越多，显示的图像就越多

Thank you Hash..我知道这是一个简单的解决方案。Thank you Hash..我知道这是一个简单的解决方案。当元素有高度和宽度时，会显示背景图像，因为没有内容，所以没有高度。您可以手动指定高度/宽度，也可以根据具体情况使用“最小高度最小宽度”属性。当元素具有高度和宽度时，将显示背景图像，因为没有内容，所以没有高度。可以手动指定高度/宽度，也可以根据具体情况使用“最小高度最小宽度”属性。

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

}