99

I have a production and development server. The problem is the directory structure.

Development:

  • http://dev.com/subdir/images/image.jpg
  • http://dev.com/subdir/resources/css/style.css

Production:

  • http://live.com/images/image.jpg
  • http://live.com/resources/css/style.css

How can I have a style.css in css folder that uses on both servers the same path for the background: url property? Is there a trick I can use with relative paths?

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
johnlemon
  • 20,761
  • 42
  • 119
  • 178

3 Answers3

151

The URL is relative to the location of the CSS file, so this should work for you:

url('../../images/image.jpg')

The relative URL goes two folders back, and then to the images folder - it should work for both cases, as long as the structure is the same.

From https://www.w3.org/TR/CSS1/#url:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

Kobi
  • 135,331
  • 41
  • 252
  • 292
  • will this work If I have to go 2 steps back ( updated the answer ) url(../../images/image.jpg) ? – johnlemon Apr 28 '11 at 08:13
  • @anothershrubery - sorry my first example was flawed – johnlemon Apr 28 '11 at 08:14
  • @danip - it should work, but you don't have two steps from `http://domain.com/css/style.css`. I'm not sure what can be done there... **EDIT:** - yes, it should work with the updated structure, I've updated the answer (just another `../`, it seems). – Kobi Apr 28 '11 at 08:18
10

Personally, I would fix this in the .htaccess file. You should have access to that.

Define your CSS URL as such:

url(/image_dir/image.png);

In your .htacess file, put:

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^image_dir/(.*) subdir/images/$1

or

RewriteRule ^image_dir/(.*) images/$1

depending on the site.

Garison Piatt
  • 143
  • 1
  • 7
2

i had the same problem... every time that i wanted to publish my css.. I had to make a search/replace.. and relative path wouldnt work either for me because the relative paths were different from dev to production.

Finally was tired of doing the search/replace and I created a dynamic css, (e.g. www.mysite.com/css.php) it's the same but now i could use my php constants in the css. somethig like

.icon{
  background-image:url('<?php echo BASE_IMAGE;?>icon.png');
}

and it's not a bad idea to make it dynamic because now i could compress it using YUI compressor without loosing the original format on my dev server.

Good Luck!

pleasedontbelong
  • 19,542
  • 12
  • 53
  • 77