Background Image Disappears When Changing Its Background-position?

Okay so I have a list of links, like so

• item1
• item2
• item3

and I have a 340x40 (34

Solution 1:

how about putting the css to the link itself? like:

<ul><li><ahref="..."></a></li></ul>

a:hover {
    background: url(../images/liHover.png);
    background-repeat: no-repeat;
    background-position: fixed;
}

and then try using the background position as fixed..? hope it would work..

Solution 2:

It's called a CSS sprite. In order to reduce the number of HTTP requests needed to load images on the page, all of the images are combined into a single image. In order to display images within the single image, the width and height of each element (e.g. a li) acts as a viewport, while the background-position determines the positioning of the single image as if it were the background and only the width and height of the image within the element are visible.

I recommend reading a tutorial on CSS Sprites so you understand the concept better.