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.

Answer 2

The url in your CSS needs to be an absolute (or relative) url and not use the tilde mapping as it is not a server-side component.

    background-image: url(  "/images/menu.jpg" );

Answer 3

It's not a glaring omission. Not an omission at all. The tilde is an ASP construct. In your CSS it won't have any meaning.

Answer 4

One "replace all" operation and you're set.

Replace file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite with blank.

Answer 5

I have tried setting the background-image property from CSS in my ASP.Net application (i.e. giving the relative path as described in the post). However, it did not work for me. Later, setting the background-image as background-image:url('http://localhost:1701/Images/BannerTileBackground.gif'); it did work..

Please let me know what is the correct approach, and the reason why it didn't work before.