Background-Image Not Rendering
Question
I have a background-image that is getting loaded into the browser but it's not rendering on the page. Here's the code:
HTML
<body>
<div id="mainContainer">
</div>
</body>
CSS
#mainContainer
{
background-image:url('bckgrdImg.png');
}
That's it. I just need the image to render. Again, when I inspect the page in Chrome I see the image being loaded into the browser but it's not on the webpage. Any thoughts? Thanks.
4 answers
solution1
2 2012-11-02 03:08:08
Try giving your div some width and height. It's because if you look at it, the div has height 0.
solution2
2 2012-11-02 03:08:48
A link would be VERY helpful.
But try setting width and height on #mainContainer first.
Like:
#mainContainer
{
width: 100%;
height: 100%;
background-image:url('bckgrdImg.png');
}
solution3
2 ACCPTED 2012-11-02 04:18:38
Hi now define at least min-height of your div because you r div id width is by default 100% and height is 0 than define at least min-height of your div
as like this
#mainContainer
{
background-image:url('bckgrdImg.png');
min-height:200px; // height define according your design or background images
}
solution4
-1 2012-11-02 03:09:38
remove the single quote
#mainContainer
{
background-image:url(bckgrdImg.png);
}
You may need to defined the dimension for this div. When nothing in the div, without the width and height css, the div will display as invisible becoz it is 0px x 0px :)
#mainContainer
{
background-image:url(bckgrdImg.png);
height:100%;
width:100%
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.