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

Question

РЕДАКТИРОВАТЬ: background-position действительно меняет положение фонового изображения. Я понял, что реальная проблема, с которой я сталкиваюсь, это нечто другое, что можно увидеть в этой теме: Фоновое изображение исчезает при изменении его положения фона?

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

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 значения х / у (горизонтальные / вертикальные). они могут быть также значениями px,em или%.