hi Flynn,

I have been reading posts to add images to the menu bars. I have few questions and problem i came across.

1.
when i add the code the following code, it works but it image only shows up until my last created page or category. how do i extend it all the way to my layout width? plz check my test site

ul.rMenu li {
background: url(my/image);
padding: 10px 20px 10px 20px;
}

if i use

ul.rMenu {
background: url(my/image);
padding: 10px 20px 10px 20px;
}

than the image works the way i want, but only problem is, the pages shows up like the default and cramped on the image which doesn't look good. is there a way to add transparency to your default menu bar so it blends in with my image? or any other good idea u might have?

also tried the code i found while reading posts, it doesn't work..my image just disappears ..

div.rMenu-center {
background: url(my/image);
}

2. how do i add different images for page menu and cat menu cuz when i add image with the code i have it shows up on both. what css code do i add to separate them?

3. my "Home" page link is always highlighted? how do i undo it?

i would really appreciate if you could tell me the exact code so it works properly, because code i tried from others responses did not work for my site..thanks a bunch.

(p.s. more donation coming from my end..thanks again for great job u have been doing )

Use the second one but add an ID or !important to override the existing padding

ul.rMenu-hor {
background: url(my/image) repeat-x;
padding: 10px 20px 10px 20px !important;
}

ul#rmenu2 {
background: url(my/image) repeat-x;
padding: 10px 20px 10px 20px;
}

ul#rmenu2 = page menu
ul#rmenu1 = category menu