asked on

ASP.NET 2.0 Menu control - background image?

Ok, I know I may be just overlooking something, so bear with me. I'm trying to do a simple horizontal menu (Dynamic) for a web site for which I want to have a background image that tiles. The CSS is really simple - here's what I have so far;

<style type="text/css">
.menuItem
{
color:black;
border:Solid 1px Gray;
background-color:#c9c9c9;
background-image:url(~/canada/images/backgrounds/MStoolbar_bg.gif);
padding:2px 5px;
}
</style>

The menu;

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="menuItem">
<Items>
<asp:MenuItem Text="Education" Value="Education" SeparatorImageUrl="~/images/buttons/toolbar.separator.gif"></asp:MenuItem>
<asp:MenuItem Text="Support" Value="Support" SeparatorImageUrl="~/images/buttons/toolbar.separator.gif"></asp:MenuItem>
<asp:MenuItem Text="Training" Value="Training" SeparatorImageUrl="~/images/buttons/toolbar.separator.gif"></asp:MenuItem>
<asp:MenuItem Text="Resources" Value="Resources" SeparatorImageUrl="~/images/buttons/toolbar.separator.gif"></asp:MenuItem>
<asp:MenuItem Text="Events" Value="Events" SeparatorImageUrl="~/images/buttons/toolbar.separator.gif"></asp:MenuItem>
<asp:MenuItem Text="Recipes" Value="Recipes" SeparatorImageUrl="~/images/buttons/toolbar.separator.gif"></asp:MenuItem>
</Items>

</asp:Menu>
--------------------------------------------------------------------------------------
As you can see, its fairly simple and straightforward. The problem is, the gray background shows up, but the image does not. It's a small image that also needs to be tiled.

ASKER CERTIFIED SOLUTION

samtran0331

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bob Learned

You are so right, the tilde only works with server controls. Remember that any references to paths in CSS files are relative to the CSS file, and not the page. What I usually do is store the CSS file in the root, and reference the image in a sub-folder (/Images). Then, in the page, you can reference the CSS with the relative pathing necessary to find the CSS file:

../../Main.css

Bob