I am trying to be more Zen in my CSS, and also to reduce the load on my server. I have heard and sort of seen a technique where I can use a background image and an offset value to allow me to download all my little icon images in one single image, and use CSS to display the right image. However, I am a little confused how to do this correctly. Specifically, if I have a 16x16 image, 48 pixels along in my big image, called img.png, I want something like this:

```
<img style="background-image: url('img.png'); background-position: 48px" />

```

(Obviously taking the style out into CSS, but inline here for illustrative purposes.)

However, img ignores the offset. If I used something like a span I am not sure exactly how to set the width of the span (in fact I tried, and it seemed to ignore width.)

Any help would be appreciated.