views:

195

answers:

2

I want to serve my css and images from a static cookieless domain. Now my problem is how to point to the images from within my css files.

I don't want to program my domain hard within the css file, for example:

http://static.com/image.png

I would rather have a variable pointing to the the image, so it works for every static domain i use.

What is the best way for achieving this. Should i run the whole css file trough php and add the static domain in front of all the png references. A downside in this is that i have to place the whole css in html.

Or is there another more optimized way of doing this.

+2  A: 

When you pull the css from a static domain, relative URLs in the CSS will point to the very same domain. So you can just use relative paths and serve both css and images from that domain.

mnemosyn
So if i understand this correctly. If my main domain is http://maindomain.com and the static domain is http://staticdomain.com. When i load the CSS files from the static domain, and in it I reference backgorund:url('/somepng.png'); it will look in the static domain, not in the main domain.
Saif Bechan
@Saif Bechan - Correct.
wows
Cool this works correct, very easy to set up!
Saif Bechan
+4  A: 

So long as the images come from the same server at the stylesheet, using relative URIs should be sufficient.

From the CSS Spec:

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. Relative URIs (as defined in [RFC3986]) are resolved to full URIs using a base URI. RFC 3986, section 5, defines the normative algorithm for this process. For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

There's an interesting essay by Bert Bos (one of the authors of the CSS spec) about variables in stylesheets. You can read it here.

Dancrumb
Agreed - simply host the CSS sheet itself on the static domain, and then reference your images like url(images/image.gif), etc. The browser makes CSS image requests from the context of where the CSS sheet is hosted.
wows
Nice! thanks for the help guys. I was breaking my head with this for days. I should have just tested it out, it took me only minutes to set up. Great!
Saif Bechan