How Are Relative URLs in CSS Files Resolved?

Locating Relative URLs in CSS Files

When referencing resources using relative URLs within CSS files, it's crucial to determine their relative location. For instance, consider the CSS file base-styles.css containing the following CSS:

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

If this style sheet is included in various documents using , where will the relative URL in the CSS file be rendered relative to?

Answer:

According to the W3:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

Hence, the relative URL will be relative to /stylesheets/.

This approach makes logical sense because the CSS file can be included in pages in diverse directories. Standardizing the URL based on the CSS file ensures that the URLs function regardless of where the style sheets are linked.

The above is the detailed content of How Are Relative URLs in CSS Files Resolved?. For more information, please follow other related articles on the PHP Chinese website!