How can I use a background image instead of the IMG tag in html?

advertisements

I have the following HTML with many of these kinds of links:

<a class="button" id="menu">
   <img width="16" height="16" src="/Images/control-double.png">
</a>

I created a sprite for these with all the images combined using

spritegen

But when I look at this it seems like it's just for background as it gives an example:

.sprite-control-double{ background-position: 0 -396px; width: 16px; height: 16px; }
#container li {
    background: url(csg-4febd28fe3aa3.png) no-repeat top left;
}

How can I use a sprite with positioning for an image instead of a single image?


If you use the "sprite" technique, then you don't need IMG elements within your anchors:

a.button {
    background-color: transparent;
    background-image: url(/Images/control-double.png);
    background-position: 0 -396px;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

I added the background-color style because in some browsers the rendering engine will not show a background image if there is no background color.