CSS Relative URLs: From Stylesheet or HTML Document?

Relative URLs in CSS Files: A Question of Relative Position

When referencing assets like background images in a CSS file, relative URLs are often employed. However, where exactly is the relative URL being measured from?

Consider the following CSS code:

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

If this stylesheet is included in various documents via , is the relative URL within the CSS file evaluated relative to:

• The stylesheet document at /stylesheets/?
• The current document where the stylesheet is included?

Answer:

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

Therefore, in this case, the relative URL in the CSS file will be interpreted relative to the stylesheet document at /stylesheets/.

This makes sense because the CSS file can be used in multiple pages across different directories. Standardizing the relative URL's starting point to the CSS file ensures that the URLs will function correctly regardless of the page's location.

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