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

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?

51605 次浏览

小开

To the CSS file.

小开

最佳答案

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

小开

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:

小开

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