背景图像不呈现

问题描述：

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

HTML

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

CSS

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

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

答

嗨现在定义的至少min-height您div因为你r div id width是默认100%和height is 0比定义你的div

至少min-height像这样

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

答

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

答

链接将是非常有帮助的。

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

像：

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

答

删除单引号

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

您可能需要定义尺寸为这个div。没事的时候在div，而宽度和高度的CSS，那么div会显示为不可见becoz是0像素X 0像素:)

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

引号是可选的，在某些情况下甚至是首选。不过，这里不是什么问题。另见：http://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage –