Question

I have a simple HTML/CSS list that is displayed inline. I am using a background image for the list and another variant for the onhover command of that list.

The on hover background image does not seem to sit correctly. It is displayed slightly too big and seems to have some default padding,

What is the best way to control the size, padding and margin of the background-image for the onhover command in CSS?

Thanks in advance

#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}

#navbar a{
color: white;
text-decoration: none;
}

#navbar ul{
list-style: none;
margin:0;
padding:0;
}

#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding: 1px 10px 1px 10px;

}

#navbar li:hover{
background-image: url('../images/navbar-selected.png'); 
}

<div class="clear" id="navbar">
    <ul>
          <li><a href="index.php">Home</a></li>
          <li><a href="stock.php">Stock</a></li>
      <li><a href="overview.php">Overview</a></li>
</ul>   
</div>  

Answer 1

You could do it like this:

#navbar li:hover{
background-image: url('../images/navbar-selected.png');
background-size: 50%;
background-position: center;
}