Question

When it comes to CSS the following rule applies:

Partial URLs are interpreted relative to the source of the style sheet,
not relative to the document.

But here’s my problem :

I have different websites that use the same CSS file. While they use the same layout, the actual images the CSS references are different for each one of them.

Exemple:

#header {
width: 960px;
height: 200px;
background: url(/images/header.png);
}

Each domain has its own “images” folder and its own “header.png” that I would like the CSS to reference. Currently it behaves as it’s supposed to and tries to find the png file on the domain where the CSS is hosted. What I want is for it to get the png file from the domain where the CSS file was called.

I use “link” for the stylesheets because “@import” breaks progressive rendering in IE.

Any suggestion or workarounds?

Answer 1

What I want is for it to get the png file from the domain where the CSS file was called.

You’re going to have to have separate URLs for each domain referenced. So www.example1.com references its stylesheet as /style/sheet.css and thus grabs it from http://www.example1.com/style/sheet.css whilst www.example2.com gets it from http://www.example2.com/style/sheet.css.

However just because they look different from the client end that doesn’t mean they have to be different files on the server side (with all the maintenance that would imply). You could just point an Alias on each domain to the real, shared CSS file.

The only other workaround I can think of would be to split out the URL-referencing rules like background-image and put them in a domain-specific stylesheet or an internal stylesheet.