7

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..
Pavlo
  • 43,301
  • 14
  • 77
  • 113
Fr0z3n
  • 1,569
  • 1
  • 18
  • 39
  • Why did you delete your [last question](http://stackoverflow.com/questions/16271787/mysql-query-order-by-group-by-and-count)? – Himanshu Apr 29 '13 at 05:49
  • @hims056 Because i've solved, it was simple to do, and to prevent downvotes i deleted it. – Fr0z3n Apr 29 '13 at 06:35
  • Beware from deleting questions. You progress to [question ban](http://meta.stackexchange.com/q/86997/187824) by deleting your questions. :) – Himanshu Apr 29 '13 at 06:38
  • 1
    @hims056 Thank you, i did not know of this. I will take in mind next time. – Fr0z3n Apr 29 '13 at 06:43

1 Answers1

6

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.

Moseleyi
  • 2,585
  • 1
  • 24
  • 46
  • 1
    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. – BoltClock Jan 23 '13 at 08:32
  • 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! – Fr0z3n Jan 23 '13 at 08:35
  • @Edga Thanks for describing to take separate x,y positions. – Zaker Feb 28 '15 at 11:55