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

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