Is it possible to change the X background position and not affect the Y background position of an element in JS or jQuery?

Question

My first idea was to see if there's some sort of background-position-x property in CSS, but apparently not. See: Is background-position-x (background-position-y) a standard W3C CSS property?

Is it possible with javascript to somehow change x position of a background, but leave the y as whatever it was before?

I have three elements, each one using sprites for backgrounds. The hover state will change for each of them, but I would like to know if I can use JS to change the clicked state by changing only the X background position. Each element's background inside the sprite has a corresponding state for clicked, and the new X value of the position will be the same for all three elements. However, their Y values are different, and I need to leave each Y value as whatever it currently is.

I could just create a line of jQuery for each element, and give the specific new X and Y coordinates, without too much work, but it's still extra code and a mere work around for my innitial idea.

Hopefully this is clear enough.

Answer 1

You can do background-position: Xpx Ypx, so you can adjust JUST the X value and leave the Y value alone.

You can also do this in pure CSS, just by using :hover and :active pseudo classes.

Answer 2

There actually IS a background-position-x and background-position-y, however it isn't supported in FireFox :/