5

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?

Improve this question

6 Answers 6

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This seems like a good solution, I don't mind having a css file on each domain. All I want is to be able to update them all at once. How would this alias thing work?
Depends on what web server you're using. On Apache you'd add an Alias declaration to each <VirtualHost>, pointing to the file or directory you want to share between hosts. On IIS you can only alias a whole directory, which you do by creating a new ‘virtual directory’ in IIS Manager. More: httpd.apache.org/docs/2.2/mod/mod_alias.html#alias / msdn.microsoft.com/en-us/library/zwk103ab.aspx
Server is Apache, I just did a quick test with one website and it seems to be working. Thanks a lot! PS stackoverflow is a goldmine! Thanks everyone.
2

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.

Improve this answer

3 Comments

This will cause the webserver to do an HTTP request. Not a good solution.
I don't mind the extra http request if it's the only way I can get it to work. Would this break IE's progressive rendering though?
No, but it may slow it down because the file first has to be downloaded from the first server, then from the second.
1

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

Improve this answer

Comments

1

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?

Improve this answer

1 Comment

Enkay has different hosts and not just different paths.
0

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);
}
Improve this answer

1 Comment

Not a bad idea. I'm trying to make it easy to update my layout across all my websites. It's going to be a pain to break my CSS into 2 parts. Once that's done, it would probably make updates easier since I would rarely need to wedit the "local images.css files". I'm still hoping for a miracle solution that would allow me to keep everything in one easy file that's easy to update no matter what I want to change.
0

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?

Improve this answer

3 Comments

Ah, but how would the PHP script know which site was calling it, to get the $domain variable? You could try with HTTP_REFERER, but that's highly unreliable and almost never a good header to look at. You'd also have to do some significant work on cache and vary headers, or you could break proxies and caches quite badly.
The way the sites are made, there's already a php variable in each file of the website that contains the domain. This was needed for another feature. I'm not sure how I could inject that value into a linked css file though. Any clue?
You can rename your css file style.php and then use php and css together (with the <?php and ?> tags obviously). Don't forget to change the link to your style sheet from style.css to style.php though.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.