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"

Define far far away from the original location.

j08691
– j08691

2012-09-02 01:30:38 +00:00
Commented Sep 2, 2012 at 1:30 — j08691
– j08691, Commented Sep 2, 2012 at 1:30
possible duplicate of Specifying base url for css

sachleen
– sachleen

2012-09-02 01:31:31 +00:00
Commented Sep 2, 2012 at 1:31 — sachleen
– sachleen, Commented Sep 2, 2012 at 1:31

Andrew Rasmussen · Accepted Answer · 2012-09-02 01:32:33Z

0

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

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

answered Sep 2, 2012 at 1:32

Andrew Rasmussen

15.2k10 gold badges47 silver badges84 bronze badges

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

5 Comments

Zoltan Toth Over a year ago

how is that different from what the OP has?

Andrew Rasmussen Over a year ago

I added the '/' in an edit immediately after posting. My answer is an absolute path whereas OP's code uses a relative path.

Zoltan Toth Over a year ago

had to refresh the whole page to see the / - now it makes sense

goFrendiAsgard Over a year ago

I see, but in my case, some of those scripts are third party, which is nearly impossible to edit

Scott Flack Over a year ago

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).

jlank · Accepted Answer · 2012-09-02 01:41:59Z

0

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

answered Sep 2, 2012 at 1:41

jlank

1094 bronze badges

1 Comment

goFrendiAsgard Over a year ago

I see, but in my case, some of those scripts are third party, which is nearly impossible to edit

Collectives™ on Stack Overflow

How to specify base url for CSS and javascript?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related