I encountered a problem that required me to change background positioning of the image while working on the sprited image. While looking up online I ended up using javascript command: object.style.backgroundPosition.

But what if you only want to change Y co-ordinate of an image without disturbing X Co-ordinate?

Researching some more I ended up on javascript command object.style.backgroundPositionY. (Or object.style.backgroundPositionX if you only want to change X-coordinate of an image). This was working fine in IE6, IE7, IE8, Chrome and Safari but Firefox!

Firefox doesn’t support backgroundPositionX or backgroundPositionY. however it does support backgroundPosition by itself. I was working on a prototype library so I used split(” “) with delimiter as space to split the values and store it in an array.

Example Code:

var temp = $('header').getStyle('background-position');
var split = temp.split(" ");
$('header_horizontal_position').value = split[0];
$('header_vertical_position').value = split[1];

Using the value of X co-ordinate from split[0], I wrote the code below:

document.getElementById(curImage).style.backgroundPosition = split[0] + " -40px";

So the X co-ordinate remained the same and I was able to change the Y co-ordinate.

More on CSS background property browser-support can be found from here (link1) or here (link2).

Advertisements