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

background, background-image, css, javascript, jquery

Solution

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.

Problem

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.

Original source