April 6, 2009

Using Relative URLs in CSS with ASP.NET

Filed under: Development — Tags: , — Darrin Maidlow @ 6:42 pm

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;

 

Now when the CSS is requested by the browser and rendered out, the URL to the image file will be properly displayed as /RootFoolder/img/header-bg.png.  This is a very simple modification, but one could go a little more crazy and do something like  detect browser make/model and send out browser specific css in pre-defined literals, or possibly add authentication checks. 

 

 

Technorati Tags: ,

Powered by WordPress

Switch to our mobile site