How do you put a gradient background on ASP.NET menu items?

Question

The boss wants the master page's menu to look nicer. I generated my gradient file with one of the tools available on the net, no problem there..

I tried to make a CSS class for each menu item but when I use the background-image directive and the style builder, I get a line like:

background-image: url('file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite/Images/Gradient.png')

...when what I want is

background-image: url('~/Images/Gradient.png')

The first url will, of course, only work when I'm debugging on my local machine - deploy this and I'm hosed. So many other ASP.NET objects work with "~/" to indicate the top-level directory of the website but my css file doesn't like it and I can't set a background image for the menu control or the menu items - seems like a GLARING omission when I can do it to so many other controls.

What am I missing?

Answer 1

You're almost there... try this:

.menuStyle
{
  background-image: url('/images/BG.gif'); /* Putting a slash in front means its relative to the root.  No slash would be relative to the current directory. */
  background-repeat: repeat-x; /* assuming you have a vertical gradient. */
}

Hope that helps.