How do I convert a CSS background-position property from percentages into pixels?

Question

I'm centering a background right now (using background-position: 50% 50%;), that I'd like to animate using Javascript. But, I want to be able to animate this using pixel measurements. Effectively I want to set the background-position to something like "50% + 10px". Is this possible using Javascript?

I can possibly do it by finding the height of the background image and the height of the browser screen and do some arithmetic, but this seems like a convoluted solution.

Answer 1

In the future this will be possible using CSS3's calc function. But since that's not widely supported right now, below is a more practical solution.

Simply use the incremental notation jQuery supports for these properties. For example

$(some-element).css({ "background-position": "+=10px" });

This syntax was supported by $.animate before it was supported by $.css, but recent versions of jQuery support it in both cases.

Here's a jsfiddle demonstrating it in action.