What is wrong with this CSS?

Question

I have the following CSS code:

.yellow {
    background-image: url('/images/yellowlight.png');
    background-repeat: no-repeat;
    height:100%;
    width:100%;
}

and the following HTML code:

<div class="yellow">&nbsp;</div>

However, the div on the page does not have the image. You can see this by clicking on the blue "Logs Status" button (in the tab box) at http://cl58logs.co.cc/.

What's wrong with the CSS?

Answer 1

Your div is not large enough. Background images will not scale. If you want the image to scale, you'll have to use the img tag.

Also, note that height: 100% doesn't work in CSS, except for table cells.

Answer 2

The height (437px) and width (700px) of the image is greater than the dimensions of your div. Set an appropriate height and width for your div to allow for the image to be shown.

Install Firebug to better inspect your HTML elements when you come across issues like this.

Answer 3

Since you're setting height and width to 100%, the amount of the image you see will depend on the divs containing the yellow class. Try changing the width and height on the status class and you will actually see your the bg image on yellow.

Answer 4

The problem is that the div with the background image has almost no content (apart from a space character).

If you force the div to have a larger height, for example, by changing the CSS to this:

.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}

then your image appears