CSS background-position

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..

Bran

Why did you delete your last question? – Lindblad

@hims056 Because i've solved, it was simple to do, and to prevent downvotes i deleted it. – Bran

Beware from deleting questions. You progress to question ban by deleting your questions. :) – Lindblad

@hims056 Thank you, i did not know of this. I will take in mind next time. – Bran

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.

Lamrert

In terms of browser support, background-position is a mess. Not all browsers implement CSS2.1 background-position correctly, let alone B&B level 3 background-position or any of the rejected proposals. – Henebry

I did not know these properties, but to read that they work Even in IE-6 and not in Firefox ..... it's really a bad thing! – Bran

@Edga Thanks for describing to take separate x,y positions. – Cupro