Every now and then I look at using background-position-x and background-position-y but can never seem to find a definitive and up-to-date resource. To save myself the trouble in the future, I’m documenting it here.

Positioning via separate X and Y values is a feature that Internet Explorer introduced but never made it into a W3C specification. Any recommendations to add it to the spec have been denied.

Why have separate X and Y values?

I believe that there are several reasons why you may wish to have separate values.

Animation

The last time I was frustrated by the lack of consistent cross-browser support for X/Y was when I wrote my article on animating background images using jQuery. Having to take a string value, split it into its separate X and Y values, parse the units, and then rebuilding the X/Y value into a single string is a cumbersome experience. Being able to animate just the X or Y value would have been much simpler and would have worked with jQuery "out of the box", since jQuery already knows how to animate pixel or percentage-based values.

Sprites

CSS Sprites have become a popular way to optimize the performance of a page. It’s an interesting technique in which you compile numerous background images into a single image and then use background-position to only show the desired part of the image on an element.

#a { background: url(sprite.png) 0 0 no-repeat; }
#b { background: url(sprite.png) 0 -30px no-repeat }
#c { background: url(sprite.png) 0 -60px no-repeat }

Of course, we could optimize this like so:

.icon { background: url(sprite.png) 0 0 no-repeat; }
#a { background-position: 0 0; }
#b { background-position: 0 -30px; }
#c { background-position: 0 -60px; }

However, given access to separate X and Y values, we could optimize it like so:

.icon { background: url(sprite.png) 0 0 no-repeat; }
#a { background-position-y: 0; }
#b { background-position-y: -30px; }
#c { background-position-y: -60px; }

Admittedly, that didn’t save us any bytes and for this reason alone, I can see why the W3C denied the inclusion of this into the specification.

Internationalization

However, let’s take a look at internationalization. Specifically, in having to deal with right-to-left (RTL) environments like Arabic. In these scenarios, where an icon is positioned on the left of some text in a left-to-right environment (LTR), the icon should now be positioned on the right.

Wouldn’t it be great to just add in an extra line in bidi environments where we tell the background of all sprites to be positioned on the right instead of the left?

html[dir=ltr] .icon { background-position-x: 100%; }

That’s it. One line. (And this actually works in IE7+, S3+ and Chrome.)

Instead, without the ability to separate X and Y values, all sprites need to be redeclared for RTL environments.

Support Table

Finally, here’s the support table for which browsers support background-position-x and background-position-y.

Opera is the only hold-out at this point and hopefully we’ll see it get introduced at this point. It has become a de facto standard and it’s exclusion from the W3C specification doesn’t diminish it’s usefulness.

I’m embarrassed. I could’ve sworn I had it working in the latest version of Firefox but I’ve re-run my test case and I can’t get it working in Firefox at all. My apologies for poor testing. But I’d still like it in all browsers, pretty please!

Go to Source