ASP.NET MVC2: how to set paths for the image links continaing with in the CSS file

Question

I our application we have image patches set in CSS file as shown below

.HeaderShodow {
    background:url('../../App_Images/HeaderShodow.gif') repeat-x top left;
    height:5px;
}

when we move this application to iss6 server the images or not rendered

we have sent css/image/script links with in the aspx file as below

<link href="<%= Url.Content("~/App_Themes/Common.css")%>" rel="stylesheet" type="text/css" />

but how to set when the image links are with in the css file

Thanks

Answer 1

The reason this doen't work is because there's the virtual directory name appended in IIS. To avoid this problem make sure you always include your CSS file using proper helpers and do not hardcode the location:

<!-- Notice the ~ in the href attribute which points to the root of the application -->
<link rel="stylesheet" href="<%= Url.Content("~/styles/somestyle.css") %>" type="text/css" />

then in the css file make sure that image paths are relative to the location of this CSS file.

Answer 2

My recommendation, as CSS image URL's are relative to the CSS file itself, is to have an images folder in the same directory as the CSS file itself.

so your directory would look like:

/Content/site.css
/Content/Images/blah.png

that means in your CSS file you can reference the images like:

.myClass
{
    background-image: url('Images/blah.png');
}

and if in your HTML you reference the CSS with the Url.Content() code, you will always get the correct path.

<link href="<%: Url.Content("~/Content/site.css") %>" rel="stylesheet" type="text/css" />