background-position value manipulation

Question

I have a project where I am building slides described inside of an XML file but it requires to allow image positioning of the slides based on offset values.

Now I have Y offsets down pat, only problem now is that I require the ability to offset something in the X by an amount but still keep the %'age value behavior.

So basically is there anyway to have background-position's x start at 50% and then offset it by a pixel amount and keep the relative behavior of the %'age( 50% + offsetInPixels)?

Answer 1

You can do this, but it isn't widely supported.

background-position: -moz-calc(50% - 20px) 0;
background-position: calc(50% - 20px) 0;

Currently (May 2011) this only works in Firefox 4 and IE9.

See http://caniuse.com/#calc for compatibility.

Answer 2

You can't do that with plain CSS (at this point in time, see Rich Bradshaw's answer).

You could accomplish that in javascript with something like:

var totalWidth = 960;
var xOffset = 10;
el.style.backgroundPosition = ((totalWidth/2) + xOffset) +"px 50px";