Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Path Best Practices

Absolute vs. Relative Paths in CSS

6:21 pm on Jun 1, 2006 (gmt 0)

New User

10+ Year Member

joined:May 26, 2006
votes: 0

We've been using absolute paths when referencing images in our .CSS files because I thought I remembered reading about some browser(s) having trouble with relative paths. What is the "Best Practice" for image paths in CSS files: absolute or relative? Are there any browser incompatibilities with one or the other?
3:43 pm on June 2, 2006 (gmt 0)

New User

10+ Year Member

joined:Sept 14, 2005
votes: 0

Welcome to Webmasterworld.

I must admit being a bit confused by your question. Is the problem in choosing between absolute and relative paths different in CSS? Here [webmasterworld.com] is a discussion about the same problem in HTML.

6:53 pm on June 2, 2006 (gmt 0)

New User

10+ Year Member

joined:May 26, 2006
votes: 0

My sites are usually structured like this:

site root
-- index.html
-- subpage.html
-- css
---- my.css
-- images
---- my.jpg
---- your.jpg
---- any.gif

In all my css files, I have been using an absolute path to images based on the root of the site.
background: url(/images/my.jpg);

Instead, can I use a relative path to images relative to the location of my.css?
background: url(../images/my.jpg);

Do any browsers have trouble with a relative path?

I hope that clarifies the question.

9:18 pm on June 2, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
votes: 0

There are pros and cons about either method.

Absolute path pros: never worry about where you're currently at ... images are always at /images (for example)
Absolute path cons: impossible to "move" the structure into a subfolder etc, as the image paths now have changed

Relative path pros: move to sub folder, move up, anywhere you want ... paths are relative, so it won't matter
Relative path cons: let's see ... are the images now in ../images, or ../../images?