CODEWITHSUNDEEP
css
Heraldmonkey
Heraldmonkey

Reputation: 2181

How to understand CSS Background-Position coordinates

Every time I create a sprite to use as css background-image, I have to crunch the math and remind myself how to remember the X and the Y coordinates in pixels. How can I remember it or see it visually to keep it straight?

Upvotes: 4

Views: 2632

Answers (3)

Anuj Kaithwas
Anuj Kaithwas

Reputation: 842

I usually keep the images anywhere on the Sprite sheet and then check out there co-ordinates by clicking on each graphic element in Fireworks(i use fireworks) and then negating the co-ordinates. For eg:if an element is at x=23px and y=20px, then in the CSS, i use background-position:-23px -20px. This always does the work.

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24733

Think 'Y' rhymes with 'SKY' so thats your top measurement (distance in px) from the top. That leaves 'X' as the remaining distance (distance from left in pixels)

When I say distance from left and distance from top, I am referring to the distance in pixels from the side of your overall image to when the part you want to show, begins.

Upvotes: 3

Heraldmonkey
Heraldmonkey

Reputation: 2181

I came up with this graphic, hope it's helpful to someone else as well.

enter image description here

Upvotes: 12

Related Questions