I created new sprite image using Instant Sprite, sprite_main.png and replaced old sprite image created by SpritMe, spriteme1.png.
I just changed image path and background positions only but the result is disappointing with sprite_main.png. I don’t understand what happen but is that because I added another 20+ icons to the sprite image?
If you’re using online services to create sprites, let them write the background-positoins for you (like spritecow). Otherwise, you’ll have to learn how to do it by hand like we all did back in the day, for each sprite.
I tend to open up my sprite in my image editor. I set the CSS to 0, 0 so I can see the image that appears at that coordinate (I know I’ll see something since there’s always something at the top left corner). In my image editor I usually use the rectangle selector to draw a box around the icon and check the coordinates of the top left corner. Sometimes I can just set my mouse there directly; it depends on how much transparency in the image.
The I use those coordinates I see in my image editor and write them as negative background position numbers in CSS.
So if an image’s top left corner is at 15, 47 (15 px from left, 47 px down from top) the background-position is 15px -47px.
I used the coordinates given by Instant Sprite and it is same every time I generated the sprite image.
Is that because some of them are 1 px background image making images below jump to top?
Maybe I can test all the images coordinates now.
Thanks. I figured out that the coordinates were wrong. Maybe Instant Sprite gave me wrong or I didn’t clear cache before I generated it.