Bueno, creo que la mejor manera de hacer esto super económico es esta:
.historia {background: url(historia.jpg) no-repeat; center top}
.contacto {background: url(contacto .jpg) no-repeat; center top}
.recursos {background: url(recursos .jpg) no-repeat; center top}
.links {background: url(links .jpg) no-repeat; center top}
.galeria {background: url(galeria .jpg) no-repeat; center top}
.home {background: url(home .jpg) no-repeat; center top}
a.activo { background-position: center bottom;}
a:hover { background-position: center;}
</style>
</head>
<body>
<div id="menu">
<li><a href="historia.html" class="historia"></a></li>
<li><a href="contacto.html" class="contacto"></a></li>
<li><a href="recursos.html" class="recursos"></a></li>
<li><a href="links.html" class="links"></a></li>
<li><a href="galeria.html" class="galeria"></a></li>
<li><a href="index.html" class="home activo"></a></li></div>
</body>
Mikel.