Css 无法显示背景图像

我正在尝试使用100%div包装器的响应式布局，然后在上面和下面放置一个带有文本的背景图像

无法使其显示

希望使用浏览器窗口调整图像大小

我做错了什么

.wrapper {
    width: 100%;
}

.image {
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
    background-size: cover;
}

.text {
    text-align: center;
    font-size: 50px;
    color: yellow;
}

---

看起来您需要为

.image

元素指定高度和宽度。以及到包装分区的高度。

您的图像实际上是0px高，这就是图像不显示的原因。 看看这个：

刚刚将.image代码移动到.text代码中：

.text {
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
    background-size: cover;
    text-align: center;
    font-size: 50px;
    color: yellow;
}

编辑：

.image {
    height: 30px;
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
    background-size: cover;
}

---

您需要将内容设置为中间分隔符或指定高度。因为初始div没有任何高度，所以如何才能看到背景

检查-

--HTML--

---

很抱歉，bt u已经在.text中设置了背景，他也知道如何设置背景，但他只是想知道为什么给定的代码不起作用，所以最好说出错误或任何其他点..我将其设置为600px并调整了大小。开始时，它会更改x和y方向，但在某个点之后，它只会调整x方向的大小。希望这是有意义的。我试过100%的身高，但没用。这就是css在不使用任何脚本的情况下的局限性吗？思想？100%的高度是什么？？直到一个容器没有内容或固定高度（200px，500px等）你能看到你在背景中有什么吗？？这是非常合乎逻辑的一点。。

<div class="wrapper">
    <div class="text">Give the height to below div!</div>    
    <div class="image"></div>
    <div class="text">So, here u have ur photo</div>
</div> 

.image {
   background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
   background-size: cover;
   height:100px;
}