Is a relative path in a CSS file relative to the CSS file?
CssPathCss 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:
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].