Linking images into menu navigation bar

[dr_consolidated]

I am having trouble figuring out what I am doing wrong in my code. What I am wanting to do is call up one of three images, depending on whether the specified page is active or inactive, or the link is being hovered over. I am only getting the anchor image next to my text, instead of the images that I have linked in. Below is a copy of the code for both the html and css. Attached are examples of the images I am trying to link to the navigation tabs.

CSS:

#mainnav {
height: 80px;
width: 80%;
margin: auto;
background: #FFFFFF;

}
#mainnav h1 {

font-family: Britannic Bold;
font-size: 20px;

}

a#nav_league {
background-image:url(images/league.gif) no-repeat top right;
margin: 0px;
display: block;
width: 80px;
height: 0px !important;
height /**/:33px;
overflow: visible;
}

a#nav_league:hover {
background-position: 0 -36px;
text-decoration: none;
margin: 0px;
display: block;

width: 80px;
height: 0px !important;
height /**/:33px;
overflow: hidden;
}

a#nav_league.current {
background-position: 0 -72px;
margin: 0px;
display: block;
width: 80px;

height: 0px !important;
height /**/:33px;
overflow: hidden;

}

HTML

<div id="mainnav">
<h1><a id="mainlogo" href="/">The Urban League</a></h1>

<a id="nav_league" href="/page/" class="current">The League</a>
<a id="nav_programs" href="/page/">Programs</a>
<a id="nav_events" href="/page/">Events</a>
<a id="nav_jobs" href="/page/">Jobs</a>
<a id="nav_resources" href="/page/">Resources</a>

</div>

[KDLA]

background-image:url(images/league.gif) no-repeat top right;

"background-image" should be "background" if you're going to include the repeat and positioning in the one line.

[dr_consolidated]

I took those out, because they were not affecting the display anyway. I also toyed with renaming the css value, but that didn't work. I am at a total loss. I can safely say this is the longest amount of time a bit of code has had me stumped :confused: