I want to use an image as a background for the Menu I created using DHTML Menu Builder. The menu builder apparently doesn't provide an option to use an image as background. I have attempted to modify the css for the menu builder but with no luck. What do I need to do to make the image I want as the background. I would also like to extend it across 90% of the page.

Attached is my css menu and my site is www.acquirenewclients.com .

Thank you in advance for helping me out.

Bryon

Hi Byron
On your code look at this line (about line 108) for the main part of the menu. It's not showing because you left off the # symbol.

Needs to be



Now just comment out the color reference for testing and change it to an image url. You can adjust to fit your directory structure. This should get you going in the right direction.

Eric,

Thank you. That worked well. Now I have the background image but with the image the menu is off center. How do I adjust the size of the menu items and make sure it centers on thje page.

Regards,

Bryon

Bryon, it's not the dhtml menu you are using, but the css menu from the html Editor.

You may not have uploaded the changes Eric suggested, because all I see is a white background and four menu items across below the header, and they are centered.

When you have uploaded the changes, we can see about what to do with the centering - unless you have solved the problem already.

What size is your image?

Sorry,

I just uploaded the changes and the image is 1000 x 86.

Regards,

Bryon

That's way to big. Needs to be the same size as one tab of you menu or smaller. I have a gradient on one of my menus that's 200 by 50. Looks like yours would need to be about 100 x 30.

I changed it to 100 x 30 and it didn't affect the menu. It's still not centered and I would love the menu to extend across the page or at least the background image would extend across the page.

Regards,

Bryon

Bryon,

You have to correct the following to your my-menu.css:



This is right under the body declaration. As you will see, the align: center is lacking the ; at the end, which leads to no recognition of the width. Actually, you don't need that line at all, the margin:auto is all you need.

Then further down, below the page styles comment:


This center class has a different width, and as it is coming after the first center class, it will rule out the definitions given above, hence the name 'CASCADING style sheet'. This is the reason for the menu to jeer off the center.

If you need the definitions in the second center class, then call the class something else, if not, delete it.

Thank you Inger,

Obviously I have a lot to learn. I removed the second center class. I was a little confused about which lines you wanted me to remove so I tied different permutations of the folllowing including removing tghe align, the width and both.:

.center {
align:center;
width:402px;
margin:auto;
height:auto;
border:none;
}

The net is that menu m,oved more to the center but is not centered...we are gaining on it

What am I missing and how do I get that image background to span the page or 90% of it?

Regards,

Bryon