Using Relative URLs in CSS with ASP.NET

When we started redoing the I decided that this new site would be all CSS based.  No more nasty tables.   Once the initial xhtml/css template was made I moved it into and ASP.NET master page.  As the site was fleshed out I ran into a problem where some of the images were not loading as the master page was used deeper within the sites structure.   A little inspection of the underlying CSS and I noticed this:

1: #header {width:100%; height:50px; background: #7D7D7D url(images/header.gif) left top no-repeat;}

 

When the master page is used from a page deeper than the site root, the paths in the CSS become invalid.  To work around this I made my CSS dynamic!  I added a new page to my project in the CSS folder.  I called this page allcss.aspx.css.   Open up this new aspx file and remove all the html.  Leave only the page header definition:

1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="all.css.aspx.cs" Inherits="landorIS.com.css.allcss" ContentType="text/css" %>

image

Note that you may need to update your classnames and stuff depending on how you name the file.  I wanted my file name to reflect the fact that it was a CSS file – but it’s still needed to end with .aspx to ensure the file would be properly parsed by the ASP.NET engine without having to mess with the extension mapping on the web server.  This resulted in Visual Studio making some illegal class names.

Also be sure that you add the ContentType attribute to the @Page definition, and set it to “text/css”, or you will get an error in some browsers stating that the Mime Type “text/html” is not “text/css”.  Nice of Firefox to do a little validation on the content.

At this point you can add your CSS to the file and use <%%> tags or codebehind to manipulate the values.  Now the CSS that was causing problems with the images looks like this:

1: background:url('<%=ResolveUrl("~/img/header-bg.png")%>') no-repeat 0 0;

 

Page 1 of 2 | Next page