CODEWITHSUNDEEP
htmlcsscss-sprites
Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114407

Is it possible to override ONE axis of a CSS background-position using CSS?

I am using CSS sprites to build a six-tab-menu. Since the tabs overlap, I decided to use six versions of the image in the sprite, one for each active tab state (one below the other). So I need to change more than one tab for each state because of adjacent overlaps, so I might as well just change the position of all of them.

In the menu each link in the menu has its own CSS background defined from the sprite image. It all fits together nicely.

What I'd like to do is add a class to the body that would change the vertical position of all the link backgrounds without having to define the horizontal so that the horizontal position can be inherited. This way I only need to define six more classes to make it work instead six of them for each state (=36).

Some equivalent of background-position:inherit -94px.

I can do it easily with jQuery, but was hoping for a CSS-only solution.

enter image description here

Upvotes: 2

Views: 1527

Answers (1)

sg3s
sg3s

Reputation: 9567

No it can't be done. Mostly because firefox doesn't support background-position-x and background-position-y though understandable because its not part of the specs.

I had this problem myself not long ago but brief investigation told me it was still not possible.

I am going to asume you have a sprite you want to use for multiple states of the menu. In this case you should just split up the sprite in 2, one for state a and one for state b, and when you add the class you simply switch over to image b with background-image.

It's ofcourse one more image but there really isn't a crossbrowser way to just shift one axis.

Upvotes: 2

Related Questions