Question

Say for example I have embeded the following CSS file:

http://site.com/tpl/theme_name/stylesheet.css

In the header of my site…

http://site.com

and the CSS file contained the following (in one of its lines)

background-image:url(images/background.gif);

But the actual url to images/background.gif is:

http://site.com/tpl/theme_name/images/background.gif

The CSS would not recognise the image right? (because the CSS file is not providing the full url).

The problem is although I can add the full url within the CSS file for the background image to show, I don’t want too…because if for some reason the theme name got renamed it will mean I’d have to manually edit all the CSS files for the themes.

So I was wondering is there any way around this ie. could I do something like ../images/background.gif (append dots)?

PS: I know I can just do so in PHP by writing a wrapper file which replaces the url with the full one, and sends the appropriate header (CSS) – but that may be resource intensive?

Answer 1

The CSS would not recognise the image right? (because the CSS file is not providing the full url).

URLs inside the CSS file are relative to the CSS file’s directory, so what you show should work just fine.

(This will no longer apply if you change the URL path later using JavaScript, but I don’t think that’s the issue here.)