danip danip - 3 months ago 8
CSS Question

How to use relative/absolute paths in css URLs?

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?

Answer

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 http://www.w3.org/TR/REC-CSS1/#url:

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

Comments