How do I get the layers backgroundPosition in pixels?

[OBAFGKM_RNS]

When I added an image to a css layer, to center it horizontally, I
used 50%. Now, in my javascript, I need to be able to determine what
that x position is in pixels. How can I do this?

[OBAFGKM_RNS]

Just to clarify, I added an image to a larger layer, and positioned
the image like this:
background-position: 50% 120px;

Now, in my javascript, I would like to find what the x coord is of
that background image.

Thanks.

[Thomas 'PointedEars' Lahn]

OB*********@yahoo.com wrote:

The problem is, different images will be used for the background
image, and the width of the image will vary from width to width. So,
if there is a way to dynamically determine the current width of the
background image, I can use step 4 of your solution. [...]

There is a way, just not a completely reliable one. Quickhack:

/**
* @see http://pointedears.de/scripts/types.js
*/
function isMethodType(s)
{
return /\b(function|object)\b/i.test(s);
}

function _getComputedStyle(el, pseudoEl)
{
if (isMethodType(typeof getComputedStyle) && getComputedStyle)
{
return getComputedStyle(el, pseudoEl || null);
}
else if (typeof el.currentStyle != "undefined")
{
return el.currentStyle;
}
else
{
return {};
}
}

var compStyle = _getComputedStyle(targetElement);
if (compStyle && typeof compStyle.backgroundImage != "undefined"
&& isMethodType(typeof Image) && Image)
{
var img = new Image();
img.onload = function()
{
window.alert(img.width);
}

img.src =
compStyle.backgroundImage.replace(/(url\(\s*'?|'?\s*\))/gi, "");
}

(There is certainly a better, more standards compliant way for writing a
gCS() wrapper; I'm working on that.)

You can reduce the above to

if (isMethodType(typeof Image) && Image)
{
var img = new Image();
img.onload = function()
{
window.alert(img.width);
}

// feature test required, see dhtml.getStyleProperty()
img.src = targetElement.style.backgroundImage
.replace(/(url\(\s*'?|'?\s*\))/g, "")
}

if the target element's style attribute had been set with a
background-image declaration.

I've tried getting the x coordinate by using backgroundPositionX,

Never heard of that. Thanks.

but that seems to return "50%" (not a pixel value) in IE, and "undefined"
in Firefox.

Because it is MSHTML-only:

http://msdn2.microsoft.com/en-us/library/ms530719.aspx

However, parsing the backgroundPosition property for the first
white-space delimited part would show the same in Firefox.
PointedEars