Using background-position with percentages for image sprites

Question

I'm trying to use the background-position property with percentages in an image sprite. It doesn't seem to work though i.e. it doesn't shift the background-image.

You can see an example here: http://jsfiddle.net/3UQYg/3/

When I use pixels, then the image does shift: See here http://jsfiddle.net/3UQYg/2/.

What am I doing wrong?!

Answer 1

background-position: x% y%;

Actually, the percent background-position works like this:

• When abscissa is 0%, then image's left side aligns container's left side.
• When abscissa is 100%, then image's right side aligns with container's right side.
• Intermediate values are calculated linearly.

Similarly,

• When ordinate is 0%, then image's top side aligns container's top side.
• When ordinate is 100%, then image's bottom side aligns with container's bottom.
• Intermediate values are calculated linearly.

---