How to specify base url for CSS and javascript?

Question

Let's say I have style.css:

#some_element{
   background-image: url('img/picture.gif');
}

The css and picture.gif are located in such a structure:

style.css 
other_style.css
more_style.css
img
   picture.gif

Using php, I combine style.css,other_style.css and more_style.css into cache_style.css which is located far far away from the original location.

In this case, the link will be broken.

In html, we have tag to define (as it name) base url of current document. So that every link and every image can take things base on that base url.

Is there any alternative for css & javascript to do this?

EDIT: some of the css/javascript are minified third party, which is nearly impossible to change "img/picture.gif" into "/something/img/picture.gif"

possible duplicate of [Specifying base url for css](http://stackoverflow.com/questions/3812375/specifying-base-url-for-css) — sachleen, Sep 02 '12 at 01:31

score 0 · Answer 1 · answered Sep 02 '12 at 01:32

0

Use an absolute path from the root directory that you're serving:

background-image: url('/img/picture.gif');

answered Sep 02 '12 at 01:32

Andrew Rasmussen

14,912
10
45
81

how is that different from what the OP has? – Zoltan Toth Sep 02 '12 at 01:33
I added the '/' in an edit immediately after posting. My answer is an absolute path whereas OP's code uses a relative path. – Andrew Rasmussen Sep 02 '12 at 01:34
had to refresh the whole page to see the `/` - now it makes sense – Zoltan Toth Sep 02 '12 at 01:37
I see, but in my case, some of those scripts are third party, which is nearly impossible to edit – goFrendiAsgard Sep 03 '12 at 02:08
I might be wrong, but I believe you both have relative paths, they're just relative to different things (yours to the webroot, his to the file it's contained in). – Scott Flack Oct 24 '13 at 01:44

score 0 · Answer 2 · answered Sep 02 '12 at 01:41

In javascript you can define a variable to hold your base url, however you can't reference or set CSS with that variable. One approach that would work is to use an absolute link to the gif instead of a relative one. Alternatively, if you know where your cache_style.css file will end up in relation to the root of your site, you can reference the gif by it's relative location to the root. For example if your cache_style.css is located at www.example.com/path/path/cache_style.css, you can reference the img directory by doing this ../../img/picture.gif

I see, but in my case, some of those scripts are third party, which is nearly impossible to edit — goFrendiAsgard, Sep 03 '12 at 02:06

How to specify base url for CSS and javascript?

2 Answers2