changing position of background image which appears after a hover html/css

Question

EDIT: background-position does change the position of the background image. I realized the actual problem I am facing is something else, which can be seen on this thread: Background image disappears when changing its background-position?

Okay so I have a set of links (a href's) inside an unordered list, and when the user hovers over them, I want a black background image to show up on top of the link and change the links color to black. I already have the background image which shows up photoshoped. Here is what I did so far

li:hover {
    color: white;
    background: url(../images/liHover.png);
}

Now, the problem is that the image doesn't show where I want it to show. I want the link to be in the center of the image. The image is like 3 pixels below where I actually want it to be. It is the same for which ever link I hover over, the image is always 3 pixels below where I want it to be. Is there a way to change the position of the image which shows up and a way to move that image a few pixels above where it is normally supposed to be? (even if we cannot do this with CSS, if someone can write a Javascript function which can get this accomplished, that would be great).

The list is just

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

Answer 1

i think this is what you mean:

li:hover {
  color: white;
  background: url(../images/liHover.png) no-repeat center center;
}

if it doesn't center the way you want, play with the center center values which are x / y (horizontal / vertical). they can be also px,em or % values.