Search code examples
cssbackgroundbackground-imagebackground-size

Css background image position animates

I am trying to make a menu that has background images that are attached an a:hover. I have different size menu links, so I figured I could have part of the image aligned left the other aligned right, and a center image that can stretch, When I apply them it works how I like except that when you first hover over it, the whole image slides down a few pixels into place. I was having the same issue when I was using just one background image I was having the same issue when using background-size contain. This is happening in Chrome, Firefox and Ie. Windows 7.

li#menubg1 a:hover, ul li li#menubg1 a:hover {
    background: url("D:\hoverleft.png") no-repeat left, url("D:\hoverright.png") no-repeat right, url("D:\hovermiddle.png") no-repeat center;
    background-size: auto, auto, 100% 34px;
}

Solution 

  •     transition: background-size 0s ease-in;
    -moz-transition: background-size 0s ease-in;
    -web-kit-transition: background-size 0s ease-in;

    I think I found the answer to my question