Question

Little question here, i have a sprite image that contain icons with normal and hover effects..

And this is the css i have for now..

.wi{
    background-image:url(images/icons/small/wi.png);
    background-repeat:no-repeat;
    display:block;
    overflow:hidden;
    height:24px;
    width:24px;
}

.wi-delete{background-position:0 0;}
.wi-edit{background-position:-24px 0;}
.wi-fullscreen{background-position:-48px 0;}
.wi-imageedit{background-position:-72px 0;}
.wi-download{background-position:-96px 0;}
.wi-tags{background-position:-130px 0;}
.wi-windowed{background-position:-154px 0;}

As you can see, the normal state of the icons is always with background position Y = 0, so the Hover images are all at Y = -24px

My html for the icons is:

<div id="something" class="wi wi-delete"></div>

The question is: it is possible to change only the Y position so i can assign a single CSS line for all icons Hover state, instead to have a css line for every icon?

Something like:

.wi:hover{
background-position: auto -24px;
}

instead

.wi-delete:hover{background-position:0 -24px;}
.wi-edit:hover{background-position:-24px -24px;}
..and so on..

Answer 1

I feel your pain!

It doesn’t work on all browsers.

It was suggested to split background-position to background-position-x and background-position-y to be able to easily change one axis only. Sadly W3C people decided it was not useful enough to add it to the standard. You can read more about it here Bugzilla thread and here on w3c website

It does however work on Chrome, it seems like only Firefox does not support it from major browser. But it’s still not in the standard and it may not be until CSS 4.