views:

2881

answers:

5

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?

+4  A: 

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" );
tvanfosson
A: 

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.

IainMH
What I meant was a glaring omission from the ASP.NET menu properties list. I can set virtually anything else and so many other controls have "background-image" but the menu doesn't. That's what I'm trying to compensate for.
David
A: 

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

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

rodbv
+1  A: 

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.

Plan B
This is strange.. url('/images/BG.gif'); doesn't work [blanks out the menu items] but url('images/BG.gif'); DOES work - Seemingly the opposite of the comments you included but it clearly IS the solution. I'm going with what worked - thanks!
David
Actually I think I actually might have been mixed up there. CSS is a little bass-ackwards and even those of us who do it for a living get confused more than we like to admit. Glad to help.
Plan B
Could it be that you're working in a virtual directory and the rooted path doesn't exist? The other path is relative to the current directory.
tvanfosson
A: 

Hi, I 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 didnt worked for me. Later, setting the background-image as background-image:url('http://localhost:1701/Images/BannerTileBackground.gif'); worked..

Please let me know what is the correct approach and the reason why it didnt worked before.

Thanks, Piyush Kumat