Want to Add Image Behind Link in List

Want to Add Image Behind Link in List

I am having trouble properly placing an image behind a list of links for
the title bar. I tried adjusting the left placement but have continued to
fail. I would like to find a solution for everyone to use. Thanks!
http://thefishonthedome.com/index.html
This is an example of what I am talking about. MBACK corre
Code Below:
<div class="header">
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="kids_art.html">Kids' Art</a></li>
(For Example) <li><img alt="" id="mback"3
src="images/fish.png"><a href="contact_the_fish.html">Contact
The Fish</a></li>
</ul>
</div>
</div>
CSS:
/*Menu Style (Same All Through)*/
#menu ul{
list-style-type:none;
}
#menu li{
display:inline;
font-family: 'Alef', sans-serif;
font-size: 30px;
padding-right:22px;
}
#menu{
text-align:center;
position: absolute;
top:0;
left:0;
z-index: 1;
}
/*Fish Position*/
/*Index Page*/
#mback{
z-index: -1;
height:75px;
width:140px;
position: absolute;
top:0;
left:0;
}
/*About Us*/
#mback2{
z-index: -1;
height:75px;
width:150px;
position: absolute;
top:0;
left:0;
}
/*Contact The Fish*/
#mback3{
z-index: -1;
height:75px;
width:140px;
position: absolute;
top:0;
left:0;
}
/*Reviews*/
#mback4{
z-index: -1;
height:75px;
width:140px;
position: absolute;
top:0;
left:0;
}
/*Kids Art*/
#mback5{
z-index: -1;
height:75px;
width:140px;
position: absolute;
top:0;
left:0;
}