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>
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.