CSS List BG Image Help

I have a css unordered list that I want each list item to have a different background image (not bullet image)

How would I go about doing this, for the life of me all the ways I have tried the images is not showing up. It’s probably something simple but any help would be appreciated.

This is the html that I have


<!--Start Header -->
  <div id="header">
    <div id="top-nav">
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li><a href="s#">Services</a></li>
        <li><a href="#">Folio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  This is still your header div</div>
<!--End Header -->

the css that I have so far is

/* Redefine generic tags */
body {
	margin-top: 0px;
	padding-top: 0px;
}

img a { border: none
}


/* Other Tags  */

#page-wrapper {
	border: medium solid #03C;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	width: 990px;
}
#header {
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	height: 200px;
}


#page-wrapper #header #top-nav ul {
	list-style-type: none;
	margin: 0px;
}

#page-wrapper #header #top-nav ul li .home a {
	background-color: #FC3;
	background-image: url(../images/home-nav.png);
	background-repeat: no-repeat;
	display: block;
	height: 135px;
	width: 135px;
}

#content {
}
#footer {
	background-image: url(../images/graf-footer-bg.gif);
	height: 140px;
	width: 990px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #FFF;
	background-repeat: repeat;
}

Just add a class to each list item as mentioned above.


<div id="header">
    <div id="top-nav">
        <ul>
            <li class="home"><a href="#">Home</a></li>
            <li class="services"><a href="#">Services</a></li>
            <li class="folio"><a href="#">Folio</a></li>
            <li class="contact"><a href="#">Contact</a></li>
        </ul>
    </div>
</div>


Then target each one like so:


#top-nav ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
#top-nav ul li, #top-nav ul li a {
    height: 135px;
    width: 135px;
    display:block;
}
#top-nav ul li.home a {background: #FC3 url(../images/home-nav.png) no-repeat;}
#top-nav ul li.services a {background: #FC4 url(../images/services-nav.png) no-repeat;}
#top-nav ul li.folio a {background: #FC5 url(../images/folio-nav.png) no-repeat;}
#top-nav ul li.contact a {background: #FC6 url(../images/contact-nav.png) no-repeat;}


Note that in your original code you hade a space between .home and the list it was suppsoed to be attached to.

#top-nav ul li .home a

It should be:

#top-nav ul li.home a

Also only be as specific as you need to be. Ids are unique so there is no need to say all this:

#page-wrapper #header #top-nav ul li {}

Just say this:

#top-nav li {}

If you want each item in the list to have a different background image, you need to put an ID on each <li>, and then use that as the hook to hang your background image on, in the CSS.

That was what I had tried but the images per class were not showing up.