CSS Relative URLs: Relative to Stylesheet or HTML Document?

CSS Relative URLs: Relative to Stylesheet or Current Document?

When specifying relative URLs within CSS files, such as for background images, it's crucial to understand the location they refer to. Take this example from the file "/stylesheets/base-styles.css":

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

Now, consider including this stylesheet into various documents like /item/details.html or /about/index.html. Where will the relative URL in the CSS file be evaluated relative to?

Answer:

According to W3, "Partial URLs are interpreted relative to the source of the style sheet, not relative to the document." Therefore, in this case, the URL will be evaluated relative to the stylesheet's location, which is "/stylesheets/".

This makes sense, as the CSS file could potentially be linked to pages in different directories. By standardizing the URL evaluation to the CSS file location, it ensures that the URLs will resolve correctly regardless of the page context the stylesheet is included in.

The above is the detailed content of CSS Relative URLs: Relative to Stylesheet or HTML Document?. For more information, please follow other related articles on the PHP Chinese website!