Making CSS url() relative to document

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

The only solution I can think of is to use an additional stylesheet for every domain that specify the domain specific images:

/* domain specific images */
#header {
    background-image: url(/images/header.png);
}

Answer 2

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.

Answer 3

quickest option is each site has it's own css to reference images relative to the css

#header {
   background: url(images/header.png);
}

To fix the issue of updating once you have performed an update you could have a batch file setup to copy your changes to the necessary subsite locations

Answer 4

As far as I know there is a difference between

#header {
background: url('/images/header.png');
}

and

#header {
background: url('../images/header.png');
}

The first is relative to the root of your site, and the second is relative to the parent directory (in relation to your css file location).

EDIT:

If both sites are served from the same host, could you use symbolic links to link your stylesheets?

Answer 5

Is there a way I could inject the domain with php into the stylesheet while using "link" ?

for exemple:

#header {
background: url('.$domain.'/images/header.png);
}

I'm not sure how that would work, but maybe someone else can take the ball and roll with it! Will using a trick like that break progresive rendering in IE?

Answer 6

You can duplicate your CSS file on each website using a server-side script.

example1.com/global.css is your CSS file

example2.com/global.css.php is a PHP script that will actually return the global.css file of example1.com

The script can be as simple as

<?php
readfile('http://example1.com/global.css');
?>

But you would need more code if you want to handle caching better.