Clever Geek Handbook

How do I find the correct offsets for CSS sprites?

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

+2


source to share


6 answers


When you create your sprite image in your graphics program, you must write the offsets for each element and use them in your CSS.



+5


source


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



+2


source


The online CSS Sprite Generator is worth taking a look at, some of the boredom should be taken from this approach.

+2


source


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

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

+2


source


The main thing to remember is that the offsets will be negative . If you have an image that is 100x500 with 100x100 sprites then the offsets would 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; }
0


source


Since the empty areas of a png file take up very few bytes, just put all the "images" at regular intervals, say every 50 or 100 pixels. This way you can simply find the first correct value and remove 50/100 pixels from it ( 50 ctrl-xin vim).

0


source






More articles:


All Articles