Is it possible to assign a gradient color bar image to the Background behind the page/category menu items, in the horizontal menu bar?

I already have some good gradiated color images the same height as the current menu bar, which I liked to put there instead of the solid color.

The Page or Cat options has a space for you to change the html color # for the background, but you can't insert anything in there like an image.jpg, so where would you go (in the CSS?) to change this to an image you select, while still having the pages/categories work as links.

Alternately, is it possible to overlay the menu choices over the header image, while still having the pages/categories work as links?

Thanks
Rhythm

Here is my handy little cheat sheet for dealing with the two menu's and the parts. Put this at the end of your css and you can see graphically, what effects what. It should be enough to get you going.

/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height: 40px;  
	margin-top:0px; 
	background: #blue; 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background: #red;
	border: none 0px; 
}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li a:visited, 
ul.rMenu li {
	background: #yellow !important;
	color: #000000 !important;
}
/* ================================================ */
/* Category menu background                         */
/* ================================================ */
div#menu2 { 
	height: 40px;  
	margin-top:0px; 
	background: #green; 
}
/* ================================================ */
/* Category Menu item's background and border       */
/* ================================================ */
div#menu2 ul.rMenu {
	background: #orange;
	border: none 0px; 
}
/* ================================================== */
/* Category Menu item                                 */
/* ================================================== */
#menu2 ul.rMenu li a:link, 
#menu2 ul.rMenu li a:hover, 
#menu2 ul.rMenu li a:active, 
#menu2 ul.rMenu li a:visited, 
#menu2 ul.rMenu li {
	background: #purple !important;
	color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

Thanks Jugggle
Also, any idea why in certain blogging programs, when you elect to have %cats instead of %pages, and have it below the header, it misfires and put a vertical list of the categories above the header, pushing the header down a couple inches? I can send you an example of a site that mis-dispplays in this way

I'd have to see it to figure it out

Originally Posted by juggledad

Put this at the end of your css

Because I'm still trying to figure out how to do this stuff:

By this, do you mean the "CSS Insert" section of the theme options? I'm trying to put a background image behind my menu bar as well.

EDIT: Never mind...yes, you did.