Can I make a link smaller than it's background image?

programming web dev
1

I don’t know if I am being stupid asking this but is it possible to have a link with a bigger background?
The reason I ask is because I am trying to build a new menu using CSS sprites and I need to have the bg image larger than the text. Like this: http://www.arcotsdesign.com/test/asd.html I am trying to make it so that when I rollover the a clear gif place over the text it alters the background of that particular CSS Sprite. At the Moment i can activate the bg rollover from above the .gif(made it black so its easier to see.) I would like the whole background to show but only when I go over gif. Does anyone have any ideas how I might do this?
html:

    <ul id="nav">
      <li id="home"><a href="#1"><img src="images/clear.gif" id="home_cl" /></a></li>
      <li id="portfolio"><a href="#2"></a></li>
      <li id="about"><a href="#3"></a></li>
      <li id="blog"><a href="#4"></a></li>
      <li id="contact"><a href="#4"></a></li>
    </ul>

css:

  #nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    height: 50px;
    position: absolute;
    top: 0;
}
#nav a {
    display: block;    
}
  #home {
    left: 0px;
    top: 0px;
    width: 203px;
} 
  #portfolio {
    left: 95px;
    width: 206px;
}
  #about {
    left: 187px;
    width: 198px;
}
  #blog {
    left: 283px;
    width: 193px;
}
  #contact {
    left: 374px;
    width: 188px;
}
#home_cl {
    background-color: #000;
    margin-top: 27px;
    height: 20px;
    width: 67px;
    margin-left: 28px;
}
  
  #home a:hover {
    background-image: url(images/navigation.jpg);
    background-repeat: no-repeat;
    background-position: 0px center;
}
  #portfolio a:hover {background: url(images/navigation.jpg) -10px -307px no-repeat;}
  #about a:hover {background: url(images/navigation.jpg) -10px -307px no-repeat;}
  #blog a:hover {background: url(images/navigation.jpg) -10px -307px no-repeat;}
  #contact a:hover {background: url(images/navigation.jpg) -10px -307px no-repeat;}