Background image for page menu?
 

I'd like to use a background image behind my page nav, is there a way to do this via the admin tool or should I just enter it directly on the style sheet? Any other advice on doing this?

Thanks!

There's no option for that but instead of editing files you should put it into HTML/CSS Inserts -> CSS Inserts:

ul#rmenu2 {
background: url(/path/to/image.gif);
}

Cool..Now how do you do the same for the actual buttons? better yet what if I want no background or color at all?

Thank you

I figured it out!
Put it into HTML/CSS Inserts -> CSS Inserts:

ul.rMenu li
{
background: url(your_image_path.gif);
}

How do I remove the formatting on the menu bar as set in Page Menu Bar?

Is there an easy way to set a rollover image for the active link?

Try something like

div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: url(/path/to/image.gif);
}

div#menu1 li.current_page_item a:hover {
background: url(/path/to/image.gif);
}

You may have to use !important or set "background-color", too, because background-color is set, not "background"

Hi

I'm trying to create a menu with background images (http:fanbus.ca) and I'm having a lil trouble getting the hover to work. Right now its going to the default colour, not the hover image.


div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: url(http://fanbus.ca/bcsportslogos/menu2.jpg);
}

div#menu1 li.current_page_item a:hover {
background: url(http://fanbus.ca/bcsportslogos/menu.jpg);
}
div#menu1 ul.rMenu {
background:transparent url(http://fanbus.ca/bcsportslogos/menu.jpg) repeat-x scroll top left;
}
div#menu1 ul.rMenu li {
background:transparent;
margin: -1px 0 -1px -1px;
}

I'd like the background image to extend the width of the site, not just the width of the menu objects.
Also, I'd like the drop-down to be a solid color with a bit of opacity and transparency.

Cheers

I've been trying this, too, with mostly success. Here's my code so far:

Just one problem left: the hover for the in-active page reverts to the color selected in the the Page Menu Bar area. I'm sure I just have to tweak the code somewhere, but I just can't see it.

Any help? Thanks!!!!!!!
(take a look: www.sandhillwebsitedesign.com)

I just picked a color for the rollover that gives the illusion of a gradient image. Just can't get the rollover image to work :(

Ok, now I'm working with the same issues with out much luck here is my hodge-podge collection of code I've picked up in several posts:

}
ul#rmenu2 {
background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat; !important}
ul.rMenu li
{background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat;
}
div#menu1 li.current_page_item a:link,
div#menu1 li.current_page_item a:active,
div#menu1 li.current_page_item a:visited {
background: url(/wp-content/themes/atahualpa332/images/menubkg.gif) repeat;
}
div#menu1 li.current_page_item a:hover {
background: url(/wp-content/themes/atahualpa332/images/menuhvr.gif);
}

Ok, that listed, here is what I am trying to achieve:
* Have a image based background in the page menu, based off of "menubkg.gif (which is a 35px x 2px graphic that I want have repeat across the page menu - this also means I must increase the height of the page menu.

* Next I want to suppress the page menu background color. so my graphic shows up in all situations except "hover". But only on the main page menu, I want something there for the secondary menus

*I want to have "menuhvr.gif appear when the mouse is hovering over the page menu items.

*Finally, I want set the font to bold

Ok, its a tall order, but if anyone has some advice please help.

-Shawn