Question

I am having a problem with a background image not showing.

I have a class that I’ve added to an anchor tag.

<a class="my-class"></a>

and the css for the class is:

.my-class {
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center
 }

The problem is that the background image is not showing.

I know it’s there because when I do this:

<a class="my-class">&NBSP;</a>

part of the image shows.

Anyone have any idea on how to make the whole image show without having to insert lots of   ‘s please?

Answer 1

<a> tag is an inline element and without a content will not show the background, so You need to make it display as a block or inline-block element and then define the size of the element.

Try with:

.my-class {
    display:     block;
    width:       128px;
    height:      128px;
    background:  transparent url("../images/my-bg-image.png") no-repeat 0 center
}

For more information you can check the box model and the display property on the CSS 2.1 w3c standard.

Also the sections The width property and Computing widths and margins have an explanation of why the element doesn’t show the background on an empty inline element.

Update:

Also the working draft of the CSS Box Model is available on the W3C site.

Update 2:

On a side note, relying only on a css background image for a link can have somme accessibility issues.