JavaScript/ CSS/ Image reference paths

Question

Hi,

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

Answer 2

Not quite sure I understand the problem: are your references not relative then? I have no such problem with virtual directories and relative paths...

Answer 3

You can still use relative addresses with "up" navigation:

E.g. In /styles/main.css for /images/bg.png:

background-image: url('../images/bg.png');

Or in /path/to/this/page.html for /index.html

<a href="../../../index.html">Home</a>

It may not be the most appealing, but it should work.

Answer 4

I like to keep all of my style images in sub-directories of the style sheet location, for example:

Site->Style->Common.css
Site->Style->Images->Background.png

This way you alleviate the issues with "up" directories in the CSS being confusing, or needing to move the CSS easily, as it is all self contained in a single directory.

Frankly, mixing style images and content images together can get a bit messy in a large site with lots of media.