我有一个背景图像正在加载到浏览器中,但它没有在页面上呈现。这是代码:
HTML
<body>
<div id="mainContainer">
</div>
</body>
CSS
#mainContainer
{
background-image:url('bckgrdImg.png');
}
而已。我只需要渲染图像。同样,当我在 Chrome 中检查页面时,我看到图像正在加载到浏览器中,但它不在网页上。有什么想法吗?谢谢。
尝试给你的 div 一些宽度和高度。这是因为如果你看它,div 的高度为 0。
嗨,现在至少定义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
}
一个链接会很有帮助。
但请先尝试在#mainContainer 上设置宽度和高度。
喜欢:
#mainContainer
{
width: 100%;
height: 100%;
background-image:url('bckgrdImg.png');
}
删除单引号
#mainContainer
{
background-image:url(bckgrdImg.png);
}
您可能需要为此 div 定义维度。当 div 中没有任何内容,没有宽度和高度 css 时,div 将显示为不可见,因为它是 0px x 0px :)
#mainContainer
{
background-image:url(bckgrdImg.png);
height:100%;
width:100%
}