problems with animated background-position-x on different browsers

Question

I've made a simple menu, every item is 300x100 pixels. There's an image in background positioned -150 pixels, when you mouseover an item it changes to 0 (so entire item has background). It works fine on Chrome, the background goes halfway on mouseover on IE, and the background is constantly positioned 0 on FF. How can I fix it? S

HTML:

<ul class="wrapper">
    <li id="webd"       class="box"><span class="title">web design</span></li>
    <li id="model"      class="box"><span class="title">3D modeling</span></li>
    <li id="digidraw"   class="box"><span class="title">digital drawing</span></li>
    <li id="other"      class="box"><span class="title">other</span></li>
</ul>

Here's the CSS sample:

.box {
    display: block;
    position: relative;
    width: 300px;
    height: 110px;
    background-color:black;
    z-index: 15;
    margin: 2px 2px 2px 2px;
    font-family: 'web_serveroffregular';
    color:white;
    font-size:x-large;
    transition: all .5s ease-in-out;
    background-position-x:-150px;
    background-repeat:no-repeat;
    text-align:right;
}

#webd {
    background-image:url(images/webd.png);
}

#webd:hover {
    background-position-x:0px;
}

You can view the entire website at http://klaunfizia.pl/damian/ and the CSS at http://klaunfizia.pl/damian/style.css and http://klaunfizia.pl/damian/galeria.css if you want.

@edit

changed:

background-position-x:-150px;

to:

background-position: -150px 0px;

This works fine on FireFox, but still goes only halfway on IE, background:fixed and backgroud-position:fixed ruins it for every browser.

screenshots (first item is mouseover): Chrome http://i.imgur.com/LKH9aoeh.png Firefox http://i.imgur.com/5cM9qpB.png IE http://i.imgur.com/FWxJ2rQh.png — user2660811, Nov 22 '13 at 16:31
I'm pretty sure that's not valid CSS. Aren't you forgetting your `{}`s? — Joshua Dwire, Nov 22 '13 at 16:33
I haven't forgot, but somehow SO doesn't let me put it in the code, dunno why, I only removed it here. — user2660811, Nov 22 '13 at 16:37
http://snook.ca/archives/html_and_css/background-position-x-y check this article and the support table — DaniP, Nov 22 '13 at 16:44

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

background-position-x is invalid CSS. Use background-position: -150px 0px instead. Also, the background-attachment property must be set to "fixed" for this to work in Firefox and Opera (according to this page at W3Schools)

edited May 23 '17 at 10:25

Community

1
1

answered Nov 22 '13 at 16:38

r3mainer

23,981
3
51
88

(background-attachment: fixed should background:fixed )(background-position-x:0px - should be background-position: 0 0)first 0 for left 2nd 0 for top – San Nov 22 '13 at 16:42
Without background-attachment:fixed works fine on Chrome and FF, but still the same on IE. – user2660811 Nov 22 '13 at 16:47

problems with animated background-position-x on different browsers

1 Answers1