不会出现背景图片

Question

我 100% 不知道为什么我无法显示 background-image。我尝试了多个不同的图像来排除这种可能性。我还将 src 更改为 url，将 background-size 从 cover 更改为 auto 100%。我做任何事情都无法显示图像。

有人知道为什么我的背景图片不显示吗？

#home-img {
 background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-position: 50% 50%;
 width: 100%;
 height: auto;
 position: relative;
}

<div id="home-img">
</div>

这里是jsfiddle

Answer 1

使用 Chrome Inspect，我将 #home-img 高度从 "auto" 更改为 537px，然后图像出现了。因此，更新高度是解决此问题的一种选择。

此 SO 问答条目中涵盖了另一个选项。

How to get div height to auto-adjust to background size?

Answer 2

如果您使用 backgound-image 并且 div 中没有内容，您应该始终设置高度。这是示例 https://jsfiddle.net/5pphkLmt/5/

<div id="home-img">
        </div>

#home-img {
    background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position: 50% 50%;
    width: 100%;
    height: 540px;
    position: relative;
}

Answer 3

您应该将 height 添加到您的代码中或在此 DIV 中添加一些内容，只需测试 height: 100px; 并享受它:)

不会出现背景图片

Background image will not appear

html

css

background-image