Question

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

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

的CSS：

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

Answer 1

试试这个：

为了演示，我使用500px x 500px你可以100％x 100％太优选了一个包裹在div周围的容器。你不需要显示：块;在你的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

背景图像未显示

3 个答案: