背景图片未显示

Question

是HTML的新手。 我遇到了类似的问题，但没有一个解决我的问题。 谁能帮忙。 提前致谢。 文件位置正确。 我的代码：

<div id="bg">
</div>

CSS：

#bg{
background-image: url("bg.png");
}

Answer 1

尝试这个：

为演示起见，我使用500px x 500px，可以用100％x 100％的div包裹一个容器来代替。 您不需要display：block; 在您的CSS中，因为div已经具有显示块作为大多数浏览器的标准。

#bg{
   width:500px;  
   height:500px;
   background-image: url('bg.png');
}

另外，请确保宽度和高度与图像的宽度和高度相匹配。

您的包含文件的地图应如下所示：

index.html
bg.png
mycss.css
... many other .html / .php / .css

如果要使用容器，css将看起来像这样。 如果您要使用CSS进行更多操作，请尝试使用容器，这对于不同大小的浏览器也非常有用。

#bg{
   width: 100%;
   height: 100%;
}
.container{
   width: 500px;
   height: 500px;
}

还有你的HTML

<div class="container">
   <div id="bg"></div>
</div>

Answer 2

路径错误，请检查我在问题下的评论。 图片应与CSS放在同一位置，否则路径应为url（'../ bg.png'）; 如果上升了一层，等等。。。尝试这个，如果出现红色，则路径错误

#bg {
   background: #ff0000 url("bg.png") no-repeat right top;
  }

Answer 3

在设置div的background-image时，div必须包含某些内容。 并且background-image的大小将根据div中包含的元素的大小进行相应调整。

尝试这个，

#bg{
    background: url("http://www.mascotdesign.com/_dev/images/famous-cartoon-character-mickey-mouse.png");
    background-size : 100% 100%;
    background-repeat : no-repeat;
}

的jsfiddle