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

Unfortunately Firefox has a stupid bug here... the paths are relative to the path of the page, instead of being relative to the position of the CSS file. Which means if you have pages in different positions in the tree (like having Default.aspx in the root and Information.aspx in the View folder) there's no way to have working relative paths. (IE will correctly solve the paths relative to the location of the CSS file.)

The only thing I could find is this comment on http://www.west-wind.com/weblog/posts/269.aspx but, to be honest, I haven't managed to make it work yet. If I do I'll edit this comment:

re: Making sense of ASP.Net Paths by Russ Brooks February 25, 2006 @ 8:43 am

No one fully answered Brant's question about the image paths inside the CSS file itself. I've got the answer. The question was, "How do we use application-relative image paths INSIDE the CSS file?" I have long been frustrated by this very problem too, so I just spent the last 3 hours working out a solution.

The solution is to run your CSS files through the ASPX page handler, then use a small bit of server-side code in each of the paths to output the root application path. Ready?

1. Add to web.config:

 <compilation debug="true">
 <!-- Run CSS files through the ASPX handler so we can write code in them. -->
 <buildProviders>
 <add extension=".css" type="System.Web.Compilation.PageBuildProvider" />
 </buildProviders>
 </compilation>

 <httpHandlers>
 <add path="*.css" verb="GET" type="System.Web.UI.PageHandlerFactory" validate="true" />
 </httpHandlers>

2. Inside your CSS, use the Request.ApplicationPath property wherever a path exists, like this:

   #content { background: url(<%= Request.ApplicationPath %>/images/bg_content.gif) repeat-y; }

3. .NET serves up ASPX pages with a MIME type of "text/html" by default, consequently, your new server-side CSS pages are served up with this MIME type which causes non-IE browsers to not read the CSS file correctly. We need to override this to be "text/css". Simply add this line as the first line of your CSS file:

   <%@ ContentType="text/css" %>