CODEWITHSUNDEEP
htmlcss
ExceptionLimeCat
ExceptionLimeCat

Reputation: 6410

Background-Image Not Rendering

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.

Upvotes: 0

Views: 1043

Answers (4)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

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
}

Upvotes: 2

Danny Hong
Danny Hong

Reputation: 1482

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%
}

Upvotes: -1

Fernando Cordeiro
Fernando Cordeiro

Reputation: 403

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');
}

Upvotes: 2

ppsreejith
ppsreejith

Reputation: 3458

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

Upvotes: 2

Related Questions