Background position only vertical

Question

I have an ul menu that exists from images with different widths for each li. I use sprite for guidance and bg. The sprite contains all the possible images for the menu. When I'm in, I want the background image to display 160 pixels each, and somehow inherit the horizontal position of the background (I understand that inherit inherits from the parent and not from the element you are calling: hover over).

How to raise the background position up and keep the horizontal position the same. Sample code below. I tried a lot of things, including the inherit option in the example below, and I know there is a CSS3 option called background-position-y, but it is not a crossbrowser ...

#menubar ul li.item-101{ width:183px; background-position: 0 0; } #menubar ul li.item-102{ width:163px; background-position: -183px 0; } #menubar ul li.item-103{ width:204px; background-position: -346px 0; } #menubar ul li.item-104{ width:117px; background-position: -550px 0; } #menubar ul li.item-105{ width:173px; background-position: -667px 0; } #menubar ul li:hover{ background-position: inherit -160px; } 

Answer 1

This is currently not possible simply using CSS (in most browsers used). You should use background-position: YOURVALUE -160px; for each guidance.

Perhaps we will someday live in a world where this is possible.

Possible solutions: jQuery can do this for you, but maybe it works more, but just a brainless instance inserting your person: it freezes or you can use background-position-y , but it’s easy for several browsers, so it’s actually not option

Answer 2

I would not hold my breath on background-position-y , as it is not even part of the CSS3 specification. (The problem is here http://www.w3.org/Style/CSS/Tracker/issues/9 ). Some browsers, such as Chrome, have gone ahead and implemented it anyway, but at least Firefox and Opera should follow, if any.

If you don't want to resort to javascript, there is no way in CSS to do this in CSS.