how to find pixel position of image from sprite image

Question

I want to know how to find an image position(coordinates) while using sprite image for styling.

Answer 1

Another, easier way to do this is through this site called Sprite Cow. I just tried it recently, and it makes things go by much faster.

Answer 2

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. (Disclaimer: I made this sometime back)

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.

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

Answer 3

I Found one amazing online Tool to Generate Sprite image CSS code.

Link : https://getspritexy.netlify.com/

It Will help you in Image Pixel generation. Very useful for me.

Answer 4

Use a graphical editing program such as Gimp/Photoshop and write the coordinates/position down as you're writing the CSS.

Answer 5

try this example helped me alot when I tried the sprite stuff the 1st time.

<style type="text/css">
#avocado{
width: 104px;
height: 95px;
background: url(http://2.bp.blogspot.com/-gwRqiyz9X8k/VM0vhBscDsI/AAAAAAAACVA/hITMUs6BjOg/s1600/foods-that-are-toxic-to-dogs.jpg) -110px -121px;
}
</style>