How to find the proper offsets for CSS sprites?

Question

I have a sprite image set as the background of an element on my page, but how do I find the proper offsets so I can actually see it on the screen?

Answer 1

When you build your sprite image in your graphics program you have to write down the offsets for each element and use those in your CSS.

Answer 2

There are web tools that will create the sprite and give you CSS with positions for you. http://css-sprit.es/ is an example.

Answer 3

The online CSS Sprite Generator is worth looking into, it should take some of the tedium out of this approach.

Answer 4

The main thing to remember is that the offsets will be negative. If you have an image that's 100x500 with 100x100 sprites, then the offsets will be:

.img1 { background-position: 0 0; }
.img2 { background-position: 0 -100px; }
.img3 { background-position: 0 -200px; }
.img4 { background-position: 0 -300px; }
.img5 { background-position: 0 -400px; }

Answer 5

Since empty areas of a png file takes up very few bytes, just put all "images" at a regular interval, say every 50 or 100 pixels. That way you can simply find the first proper value and remove 50/100 pixels from that (50 ctrl-x in vim).