CSS image d'arrière-plan sur le vol stationnaire / menu actif a diminué

J'ai un menu comme ceci:

<div id="header">
 <div id="nav">
  <ul>
   <li><a href="/home/"><img src="/images/icons/home.png" alt="Home" /></a></li>
  <li><a href="/tool/"><img src="/images/icons/tool.png" alt="Tool" /></a></li>
  <li><a href="/lists/"><img src="/images/icons/tags.png" alt="Lists" /></a></li>
 </ul>
</div>
</div>

Je voudrais un rectangle de l'image sur le vol stationnaire /état actif. Le problème est que peu importe la taille de mes images sont ils toujours a diminué.

Mes icônes sont 30px x 30px. Mes images de fond sont 69px x 34px (ils se serrent près de 30x30).

Voici mon CSS:

#header {
    color      : #cccccc;
    font-size  : 1.0em;
    padding    : 0;
    min-height : 37px;
    background : #2d2d2d;
    vertical-align: middle;
}

#nav {
    font-size      : 1.1em;
    display        : inline;
}

#nav ul {
    padding        : 0;
    margin-left    : 270px;
    margin-bottom  : auto;
    margin-top     : auto;
    float          : left;
    vertical-align : middle;
    list-style     : none;
    position       : relative;
    display        : inline-table;
    height         : 37px;
    line-height    : 37px;
}

#nav li {
    float           : left;
    list-style      : none;
    padding         : 0px 35px 3px 0px;
    display         : inline;
    vertical-align  : middle;
}

 #nav li img {
    top: 100%;
    vertical-align  : middle;
}


#nav a:hover {
    background: url('../images/icons/overtop.png') no-repeat;
    border: 0;
    background-size: 100%;
    background-size: 69px 34px;
    width:69px;
    height:34px;
}

#nav a.active {
    background: url('../images/icons/backtop.png') no-repeat;
    border: 0;
    background-size: 100%; 
    background-size: 69px 34px;
    width:69px;
    height:34px;
}