Path Best Practices

Absolute vs. Relative Paths in CSS

[grayloon]

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?

[Nybo]

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.

[grayloon]

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.

[DrDoc]

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?