爲什麼我的圖片沒有顯示在我的div中？

我有一張圖片顯示在網頁上。這是我的css：爲什麼我的圖片沒有顯示在我的div中？

body { 
    background: url(./../imgs/beach.png) no-repeat; 
    background-size: 100%; 
}

當我這樣做時，一切都顯示得很好。然後我嘗試在div中顯示相同的圖像。這裏是我的html：

<body> 
    <div class="background-image"></div> 
</body>

這裏是我的新css：

.background-image { 
    background: url(./../imgs/beach.png) no-repeat; 
    background-size: 100%; 
}

但現在沒有任何顯示。我查看了我的網絡標籤，發現image可用，但它未顯示在頁面上。我究竟做錯了什麼？

2015-06-04 jhamm

這是因爲DIV是0像素高，給它一些高度，例如：

.background-image { 
    background: url(./../imgs/beach.png) no-repeat; 
    background-size: 100%; 
    height: 100vh; 
}

2015-06-04 16:00:19

爲什麼我把它貼在身體上時不需要給身高？ – jhamm

這裏是一個很好的參考：https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/ –

由於您只使用背景，您需要在div上設置高度/寬度。

.background-image { 
    background: url(./../imgs/beach.png) no-repeat; 
    background-size: 100%; 
    height: */Your Value/*; 
}

2015-06-04 16:00:14

我建議去除背景尺寸：100％;而是將高度和寬度添加爲100％。

body { 
     background: url(./../imgs/beach.png) no-repeat; 
     height: 100%; 
     width: 100%; 
    }

2015-06-04 16:13:52

我不能使用'％'作爲寬度。我必須設置一個特定的寬度或沒有任何顯示。 – jhamm

@ jhamm這是一個無賴..嘗試，如果這個工程.. ' 身體{ \t身高：100％; 寬度：100％; \t } .background-image { background：url（「Desert.jpg」）no-repeat; 高度：繼承; width：inherit; }' –

回答