Reputation: 547

How to find the proper offsets for CSS sprites?

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?

Upvotes: 3

Answers (6)

kiranvj

Reputation: 34137

You can use a tool like this and get background positions of the icons in the sprite.

You need to first upload your image, then select an icon from the sprite. CSS will be generated, just copy the generated CSS and use it in your class.

It will generate CSS styles like this, you need to include that in your CSS class

background-position: -213px -135px; 
width: 97px;
height: 65px;

Upvotes: 3

Jacob Rask

Reputation: 24368

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).

Upvotes: 0

DisgruntledGoat

Reputation: 72560

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; }

Upvotes: 0