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

CssPath

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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');

Solution 2 - Css

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:

http://www.otherdomain.com/images/image.jpg

Solution 3 - Css

To the CSS file.

Solution 4 - Css

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNathan OsmanView Question on Stackoverflow
Solution 1 - CssNick CraverView Answer on Stackoverflow
Solution 2 - CssjshoafView Answer on Stackoverflow
Solution 3 - CssempzView Answer on Stackoverflow
Solution 4 - CssSamBView Answer on Stackoverflow