Note that there are some explanatory texts on larger screens.

plurals
  1. POchanging position of background image which appears after a hover html/css
    text
    copied!<p>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: <a href="https://stackoverflow.com/questions/19215885/css-background-image-disappears-when-changing-its-background-position">Background image disappears when changing its background-position?</a></p> <p>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</p> <pre><code>li:hover { color: white; background: url(../images/liHover.png); } </code></pre> <p>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).</p> <p>The list is just </p> <pre><code>&lt;ul&gt; &lt;li&gt;item1&lt;/li&gt; &lt;li&gt;item2&lt;/li&gt; &lt;li&gt;item3&lt;/li&gt; &lt;/ul&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload