4

I'm new to sprite, I think i understand the concept of changing the background position to replace the image. so i have this big sprite png that I downloaded but how do I know the position of the icons?

I don't have photo shop, is there any other recommended tool(free) to find the position?

5 Answers 5

7

You can use Sprite Cow for finding icon locations without using an external program. The site serves complicated icon selection posibilities.

7

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.

Other options are

  1. You need to open the image in an image editor like Photoshop. From there you can find the X and Y position anywhere in the image. Please note that left, top is 0,0. Get the x and y position and use like this

    background-position: -310px -123px;

Please note the "-" sign before X and Y co-ordinates.

  1. Start with

    background-position: 1px 1px;

Use Firebug to modify the values on the fly. By trial and error method you can find exact position.

2

MSPaint displays the cursor position relative to the image on Windows 7. If you use the select tool, it will show the size, and the position.

GIMP or Paint.Net would work too.

1

You might want to consider using CSS Sprites generator. It will make life a bit easier for you.

0

GIMP or any primitive image editor will do.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.