CODEWITHSUNDEEP
htmlcsscss-sprites
ObiHill
ObiHill

Reputation: 11876

Using background-position with percentages for image sprites

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?!

Upvotes: 4

Views: 2871

Answers (2)

The Pragmatick
The Pragmatick

Reputation: 5477

background-position: x% y%;

Actually, the percent background-position works like this:

enter image description here

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

Upvotes: 8

Jata
Jata

Reputation: 277

Exactly.

Pixels don't work the same way than percentage in background-position. As a summary: background-position:30% 10% for example will align the point located at 30% 10% of your image with the 30% 10% axis of your cointaining DIV or HTML tag. Being not so obvious to calculate the percentage number.

Next article explains it all: http://www.sitepoint.com/css-using-percentages-in-background-image/

Upvotes: 0

Related Questions