JavaScript/ CSS/ Image reference paths

Question

I was wondering if anyone has any preference for referencing images/ css or javascript files in their sites?

The reason I ask is if a client wants to host the site we've writen under a virtual directory, the site usually has to have it's file references changed - even down to url (...image path) in CSS files because we usually develop the site as if it's a root application - sometimes the client doesn't know where they're going to host it until the day before drop-date!

Using ASP.NET we can get around the problem in the forms by referencing items using the '~' when using runat server components or the Url.Content method when using ASP.NET MVC...

So, are there any good solutions for keeping the file references generic or are we faced with having to change the file references everytime?

Answer 1

Images (like background-url) in CSS are always referenced relative to the css file.

Example:

/img/a.gif
/css/c.css

To reference a.gif from the css file, you must always reference it like such ../img/a.gif, irrelevant to where a page is located or how it is rewritten