title: CSS Background Image Placement On:Hover
body: <p>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.  </p>
  
  <p>The on hover background image does not seem to sit correctly. It is displayed slightly too big and seems to have some default padding,</p>
  
  <p>What is the best way to control the size, padding and margin of the background-image for the onhover command in CSS?</p>
  
  <p>Thanks in advance</p>
  
  <pre><code>#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'); 
  }
  
  &lt;div class="clear" id="navbar"&gt;
      &lt;ul&gt;
            &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="stock.php"&gt;Stock&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="overview.php"&gt;Overview&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;   
  &lt;/div&gt;  
  </code></pre>