Adding an image to b/g of menu bar
 

Hi,

Can you tell me how I can add my .png image to the
background of my menu as well as the sub menu?

The .png is a transparent image. If there's a better way to make the b/g a transparent color please tell me. Thanks!

I was just about to ask this as well!

Has anyone had any luck? I have a background.gif, have gone to the "Page Menu Bar/Background Color" but can't post the same url there. And since my background is a pattern, it is impossible to match with a simple background color.

Anyone had any success?

Thanks!

Does this help...? Put this code into CSS inserts.

"That could be done with a background image

HTML Code:

ul.rMenu, ul.rMenu li {
background: #123456 url(/path/to/image.gif) repeat-x;
}

To have no image on sub levels

HTML Code:

ul.rMenu ul, ul.rMenu ul li {
background: #123456;
}

You might have to work on the positioning of the image, there are various techniques to do that, pixels, % or "top left" etc. http://www.w3schools.com/css/css_background.asp "

The only problem with this solution is that it looks like one background is pasted on top of another....not very pretty..


Any other solutions to use the same background url gif for menu, footer, sidebar and main body background?

The menu items are

ul.rMenu li

The menu is

ul.rMenu


ul.rMenu li {
background: url(/path/to/image.gif);
}

Thanks! I have the command working properly but now I realize that it would look better if the image is only active on mouseover. The way it looks right now isn't too nice.

In that case use

ul.rMenu li a:hover {
background: ...
}

It doesn't seem to be working now. I'm not sure why.

Try this

ul.rMenu li:hover,
ul.rMenu li:sfhover {
background: ...
}

It's still not working. Here's a link to my site.

www.edenintegrativehealth.com

The transparent b/g image is only showing up after the mouse goes over and leaves "Programs for men" under "Programs".

I don't see any image applied at all. When you made the first post you were not a donor yet and I didn't look closely enough. If you just want to add transparency to the menu items, so that the background shines through, don't use images at all:

try with the <A> instead if this doesn't work or looks bad

Increase the values for less transparency

when adding the path to the code:

ul.rMenu li {
background: url(/path/to/image.gif);
}

do we add an absolute path? my images wont load up. also does it have to be a .gif?

When you reference images through CSS Inserts always use absolute paths since the CSS Inserts are being inserted into the HEAD section of each page and with permalinks ON the CSS i.e. for single pages would be in subdirectories, so relative URLs won't work throughout the whole site