obrazkove menu - pruhledny obrazek a jak se zbavit textu ?

mam obrazkjove menu pomoci pruhlednych obrazku, mam kod ktery resi pristupnost menu ale ne pruhlednost obrazku - za obrazky je videt text nevite nekdo nejake reseni ???
diky moc
tady je kod


#menu {
height: 50px;
}
#menu li {
width: 400px;
height: 50px;
float: left;
position: relative;
list-style: none;
}

#menu a
{
display: block;
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
left: 0px;
top: 0;
z-index:
}

#menu span {
display: block;
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
#menu span {
z-index: 1;
cursor: pointer;
cursor: hand;
}
#menu span.active {
cursor: default;
}
#vizitka span{
background: url(img/vizitka.gif) no-repeat;
}
#guestbook span{
background: url(img/guestbook.gif) no-repeat;
}
#gallery span{
background: url(img/gallery.gif) no-repeat;
}
#trika span{
background: url(img/trika.gif) no-repeat;
}
#video span{
background: url(img/video.gif) no-repeat;
}

#vizitka a:hover span, #trika a:hover span, #video a:hover span, #guestbook a:hover span, #gallery a:hover span {
background-position:0px -50px;
}
#menu a:link, #menu a:visited {
text-decoration: underline;
}
#menu a:hover {
}
#vizitka li {
background:url(img/vizitka.gif) no-repeat center top;
}
#guestbook li {
background:url("about.gif") no-repeat center top;
}
#gallery li {
background:url("links.gif") no-repeat center top;
}
html-
<div id="menu">
<ul>
<li id="vizitka"><a href="index.html">vizitka<span></span></a></li>
<li id="guestbook"><a href="about.html">guest book<span></span></a></li>
<li id="gallery"><a href="tribal.php">gallery<span></span></a></li>
<li id="trika"><a href="about.html">trika<span></span></a></li>
<li id="video"><a href="links.html">video<span></span></a></li>
</ul>
</div>