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

**URL:** <https://forum.kirupa.com/t/can-i-make-a-link-smaller-than-its-background-image/281888>\
**Category:** web dev\
**Created:** [February 14, 2009, 1:04pm UTC](https://forum.kirupa.com/t/can-i-make-a-link-smaller-than-its-background-image/281888 "2009-02-14T13:04:07Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daimz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/daimz/32/2383_2.png) [@Daimz](https://forum.kirupa.com/u/Daimz)\
**Post date:** [February 14, 2009, 1:04pm UTC](https://forum.kirupa.com/t/can-i-make-a-link-smaller-than-its-background-image/281888/1 "2009-02-14T13:04:07Z")

</div>

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](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:

```auto
    <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:

```auto
  #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;}

```