Calculating the background-position for image sprites

So everybody knows that using an image sprite in place of multiple background images is a good idea.  It increases performance by reducing HTTP requests, means you don’t have to preload any images for hover states etc etc… but if you have a large sprite like this:Large image sprite

…then how do you figure out the exact positions of each image within it???

One option is to lay out a grid (each square in the grid could be 50 x 50px for example), and you could figure it out that way.  Or you could painstakingly go back and forth between Photoshop and your CSS file.

Or alternatively, you could just use  Sprite Cow.

Feel free to add your comment..

Your email address will not be published.