Reference app relative virtual paths in .css file

Question

Assume I have an "images" folder directory under the root of my application. How can I, from within a .css file, reference an image in this directory using an ASP.NET app relative path.

Example:

When in development, the path of ~/Images/Test.gif might resolve to /MyApp/Images/Test.gif while, in production, it might resolve to /Images/Test.gif (depending on the virtual directory for the application). I, obviously, want to avoid having to modify the .css file between environments.

I know you can use Page.ResolveClientUrl to inject a url into a control's Style collection dynamically at render time. I would like to avoid doing this.

Answer 1

In case you didn't know you could do this...

If you give a relative path to a resource in a CSS it's relative to the CSS file, not file including the CSS.

background-image: url(../images/test.gif);

So this might work for you.

Answer 2

On Windows 7, IIS 7.5:

Not only do you have to do the steps mentionned by Marcel Popescu.

You also need to add a handler mapping in IIS 7.5 handler mappings. So that IIS knows that *.css must be used with the System.Web.UI.PageHandlerFactory

It's not enough to just set the stuff in the web.config file.