Is a relative path in a CSS file relative to the CSS file?

Question

When I reference an image or other file in a CSS file by a relative path, is the path relative to the CSS file or the HTML file using the CSS file?

score 89 · Accepted Answer · answered Apr 27 '10 at 03:34

89

Yes, it's relative to the .css

Here's an example layout:

Page:  page.htm ... does not matter where
CSS:   /resources/css/styles.css  
Image: /resources/images/image.jpg

CSS in styles.css:

div { background-image: url('../images/image.jpg');

answered Apr 27 '10 at 03:34

Nick Craver

Thank you for the detailed answer. I was really confused in the same issue, and here you just solved it in a better way. – AbdulAziz Feb 28 '12 at 13:45
4

This is indeed reasonable, because it allows referencing the _same_ `.css` file from different `.html` files (which may be located in different places) without braking paths to external objects. – Davide Mar 04 '14 at 14:06
1

Why is the brace not closed for div in styles.css ? – Suleman Oct 12 '19 at 07:18

score 9 · Answer 2 · answered Jul 19 '16 at 18:39

9

Yes. It is relative to the CSS file. I'll add that this also includes relative to the domain the CSS file is on.

So if the CSS is referenced as:

<link href="http://www.otherdomain.com/css/example.css" type="text/css" rel="stylesheet" />

and it contains:

div { background-image: url('/images/image.jpg');

The background will be:

answered Jul 19 '16 at 18:39

jshoaf

2

The include from an external domain will only work in some browsers if you have set the header to allow external includes, due to the same origin policy – Jakob Alexander Eichler Sep 15 '16 at 19:49

score 1 · Answer 3 · answered Apr 27 '10 at 03:34

1

To the CSS file.

answered Apr 27 '10 at 03:34

empz

score 1 · Answer 4 · answered Sep 14 '20 at 16:10

1

Yes, it's relative to the stylesheet. See MDN for up-to-date references; right now, the latest draft is [css-values-4].

answered Sep 14 '20 at 16:10

SamB

4 Answers4