0

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.

ExceptionLimeCat
  • 6,191
  • 6
  • 44
  • 77

4 Answers4

2

Try giving your div some width and height. It's because if you look at it, the div has height 0.

ppsreejith
  • 3,318
  • 2
  • 25
  • 27
2

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');
}
Fernando Cordeiro
  • 385
  • 1
  • 10
2

Hi now define at least min-height of your div because your 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
}
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
-1

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%
}
Danny Hong
  • 1,474
  • 13
  • 21
  • The quotes are optional, even preferred in some cases. Not what's wrong here, though. Also see: http://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage – Rob Grzyb Nov 02 '12 at 03:11