CODEWITHSUNDEEP
javascriptcss
Kieron
Kieron

Reputation: 27107

JavaScript/ CSS/ Image reference paths

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?

Upvotes: 10

Views: 16075

Answers (3)

Andreas Grech
Andreas Grech

Reputation: 107940

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

Upvotes: 21

Tom Anderson
Tom Anderson

Reputation: 10827

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.

Upvotes: 6

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123473

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.

Upvotes: 5

Related Questions