Html 背景图像将不会出现

我100%不知道为什么我无法获得要显示的

背景图像。我尝试了多张不同的图片来排除这种可能性。我还将
src
更改为
url
，将
背景大小
从
cover
更改为
auto 100%
。我所做的一切都不会让图像显示出来

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


#家庭img{
背景图像：url（“http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
背景位置：50%50%；
宽度：100%；
高度：自动；
位置：相对位置；
}
使用Chrome Inspect，我将“主img高度”从“自动”更改为537px，然后图像出现。因此，更新高度是解决此问题的一个选项

本SO问答条目涵盖了另一个选项

如果您使用backgound image，而div中没有内容，则应始终设置高度。下面是一个例子


#家庭img{
背景图像：url（“http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
背景位置：50%50%；
宽度：100%；
高度：540px；
位置：相对位置；
}
您应该在代码中添加
高度
，或者在这个DIV中添加一些内容，只需测试
高度：100px并享受它：）
给你的div一些内容或定义一个高度。它没有高度，因为
高度：auto
不够吗？如果有疑问，请右键单击页面并检查元素。如果将鼠标悬停在代码中的
上，它将在页面上高亮显示，您会发现它的高度为0px<代码>高度：自动
将调整div的大小以适应其内容（这是默认行为），但是您的div没有内容。如果没有任何内容或设置的高度，它将是0px高。我认为您的示例基本上回答了这个问题。背景图像就是背景图像；它不占用空间，因此您的div正在压缩到尽可能小的空间。
高度：auto
将取决于孩子的高度。
<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;
}