изменение положения фонового изображения, которое появляется после наведения html/css

Question

EDIT: background-position изменяет положение фонового изображения. Я понял реальную проблему я обращенную что-то другое, что можно увидеть на этой теме: Background image disappears when changing its background-position?

Хорошо, так у меня есть набор ссылок (A HREF в) внутри неупорядоченного списка, и когда пользователь парит над ними , Я хочу, чтобы изображение черного фона отображалось поверх ссылки и меняло цвет ссылок на черный. У меня уже есть фоновое изображение, которое показывает фотошоп. Вот что я сделал до сих пор

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

Проблема в том, что изображение не показывает, где я хочу его показать. Я хочу, чтобы ссылка была в центре изображения. Изображение похожее на 3 пикселя ниже, где я действительно хочу, чтобы это было. Это то же самое, для которого когда-либо связывался я, наведите курсор мыши, изображение всегда находится на 3 пикселя ниже, где я хочу. Есть ли способ изменить положение отображаемого изображения и способ перемещения этого изображения на несколько пикселей выше, где он обычно должен быть? (даже если мы не сможем сделать это с помощью CSS, если кто-то может написать функцию Javascript, которая может добиться этого, это было бы здорово).

Список только

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

Answer 1

я думаю, что это то, что вы имеете в виду:

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

если не центр, как вы хотите, играть с center center значениями, которые являются х/y (горизонтальный/вертикальный). они могут быть также px, em или%.