23

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

Kick Buttowski
  • 6,709
  • 13
  • 37
  • 58
ArK
  • 20,698
  • 67
  • 109
  • 136
  • 1
    can you make that clearer, do you want to find special positions programmatically? or just the positions to add to the css? in that case what about measurement? trial and error? – markus Sep 21 '09 at 06:11

5 Answers5

59

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.

W3Samples
  • 1
  • 2
Nina
  • 1,037
  • 10
  • 19
  • Thank you ma'am, that's very helpful.If you don't want to install any image editing software this one's a good alternative. – vanzylv Nov 16 '12 at 17:18
  • YES! Sprite Cow is the awesome-est sprite coordinate tool I've seen. – Slobaum Nov 29 '12 at 21:48
5

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)

enter image description here

enter image description here

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.

kiranvj
  • 32,342
  • 7
  • 71
  • 76
  • MS paint with selection tool, cursor shows the positions clicked and selected dimensions - Ex: x 266 y 3 then background-position: -266px -3px – Jay Sep 21 '15 at 06:00
2

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.

Community
  • 1
  • 1
Irshad Khan
  • 5,670
  • 2
  • 44
  • 39
-2

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

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
-4

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>
Boufouss Mohamed
  • 1
  • 1