CSS Nav Menu Gradient Background

[15hoursNow]

I'm trying to add a gradient background image to my navigation menu but I cant get it to work. Where should I add this and am I using the correct syntax? If someone can help me get the root of the menu squared, I think I can handle the rest.

/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px; /*For KHTML*/
list-style: none;
}

ul#navmenu li {
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
float:left;
position: relative;
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: grey url(bg1.gif) top left repeat-x;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 100%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
background: #EEE;
color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}

[talldean]

This example works for me:

background:url('/images/gradient-background.gif') 90% 50% repeat-x grey;

The color went last, the url gets single quotes.

[15hoursNow]

that still didnt work for me :/

[talldean]

Try putting the background image on the LI elements instead of the A elements?

Also try putting the background image onto something else on the page; create a DIV, for example. That way, you know it's successfully finding and loading the right image.

[15hoursNow]

I've tried everything I can think of and this is as close as I've managed to get. I can get the gradient image to appear directly in the middle of the button and no where else. I cannot get the image to repeat for some reason. You can view it here. All the CSS is in the head of the html, so you can see what i've done with a simple "View Source".

http://www.geocities.com/slanderizer1/example.html

[15hoursNow]

wow, as it turns out, i'm retarded so I wont be needing any further help with this. my gradient image had a huge white border around it, but all it fixed now.