Demo

Here is my demo. You can view the source and probably see just about everything you need to know, but I’ll take up some real estate on this page and explain it all anyway…

In pseudo-code, what we are going to do is apply the background image to an element (a <p>) that is as large as the background image itself, place that element inside another element (an <li>), then absolutely position that first element, rather than the background image, faking a background-position… If that doesn’t make much sense, completely understandable, it barely does to me, please read on…

Here are a the only two screen captures that really matter: FF3.5.2 and IE6. (I say only these two matter because IE6 is the unruly child we’re trying to civilize and FF serves as the proper example; once it works in FF, I find mostly, it works in the other modern browsers.)

Background Image

We start with the background PNG.  A very simple PNG24 image, three big circles, three small circles, each with a drop-shadow that demonstrates semi-transparency.

HTML

Next, we look at the meat-and-potatoes of the HTML:

<li class="sticker large">
<p class="green"></p>
<span>Large Green</span>
</li>

You’ll note that the <li> has two classes: sticker and large. sticker is the “generic” class, which handles a majority of the CSS, and large is specific to the CSS for the large circles (the small circles get class="sticker small").

You’ll also note that the <p> has a class of green, which tells the CSS to position the background image to show the green circle. (Of course, it would be great if we could simply place all the classes on the <li>, but IE6 confounds us yet again but not being able to acknowledge multiple classes in CSS statements such as .sticker.small.green{...}; in this case, IE6 ignores .sticker.small and applies the CSS to any element with a class of green… I can only handle so many bugs at once…)

The <span>Large Green</span> is simply text that I want to float over the background image. In the right-column of the demo page, these <span>s are <a>s, just to show another scenario.

CSS

And now let’s have a look at the CSS (there is a fair bit, so I’ll break it into pieces, addressing each as I go):

.sticker {
position:relative;
top:0;
left:0;
width:88px;
height:88px;
overflow:hidden;
}

We make the <li> relative to contain the elements we’re going to position absolutely, give it a size and hide any elements that are bigger than those sizes (like the <p> we are about to see).

.sticker p {
position:absolute;
top:0;
left:0;
width:174px;
height:440px;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background-position-png.png',sizingMethod='crop');
}
.sticker > p {
filter:none;
background:url('background-position-png.png') no-repeat;
}

In the first declaration, we make the <p> absolute so we can move it around, give it a size and, initially, apply the background PNG using Microsoft’s filter. In the second declaration, we create CSS that IE6 cannot read (using the child selector), clearing the filter and applying the background image properly for everyone except IE6.

.sticker span, .sticker a {
position:absolute;
z-index:1;
top:50%;
margin-top:-1.2em;
width:80px;
display:block;
font-size:1em;
color:#fff;
text-transform:uppercase;
text-align:center;
}
.small span, .small a {
font-size:.8em;
}

This gives a little style to the <span> or <a>, if you need some form of text over the background image. The key part is that these elements are positioned absolutely, with the top and z-index set. The margin-top is to help get the vertical alignment “just right” and might vary based on the font-size you choose. The rest of this CSS is personal preference.

.small p {
left:-95px;
}
.sticker .red {
top:0;
}
.sticker .green {
top:-90px;
}
.sticker .blue {
top:-180px;
}

And all of this is to help extend the flexibility of the sprite: if it is a small sticker, the “background” (remember, not the image, but the <p> that contains the background image) element is shifted to the left; the color classes shift the <p> up and down to further adjust the appearance of the background image (the <p>).