Question

我有一个背景图片，它被加载到浏览器中，但它没有在页面上呈现。这是代码：

HTML

<body>
  <div id="mainContainer">
  </div>
</body>

CSS

#mainContainer
{
   background-image:url('bckgrdImg.png');
}

就是这样。我只需要渲染图像。同样，当我在Chrome中检查页面时，我看到图像正在加载到浏览器中，但它不在网页上。有什么想法吗？感谢。

Answer 1

尝试给你的div一些宽度和高度。这是因为如果你看它，div的高度为0。

Answer 2

链接非常有用。

但首先尝试在#mainContainer上设置宽度和高度。

像：

#mainContainer
{
    width: 100%;
    height: 100%;
   background-image:url('bckgrdImg.png');
}

Answer 3

您好现在至少定义min-height div，因为r div id width默认为100%和height is 0，而不是至少定义min-height您的div

就像这样

#mainContainer
{
   background-image:url('bckgrdImg.png');
   min-height:200px;  // height define according your design or background images
}

Answer 4

删除单引号

#mainContainer
{
   background-image:url(bckgrdImg.png);
}

您可能需要为此div定义尺寸。如果div中没有任何内容，没有宽度和高度css，div将显示为隐形becoz，它是0px x 0px：）

#mainContainer
{
   background-image:url(bckgrdImg.png);
   height:100%;
   width:100%
}