Relative Paths in CSS: Are They Relative to the CSS or HTML File?

Relative Paths in CSS: Relative to What?

In CSS, relative paths are often used to reference external resources, such as images or other CSS files. However, a common question arises: relative to what is the path? Is it relative to the CSS file itself or to the HTML file that includes the CSS?

Answering the Question

The answer is unambiguous: yes, a relative path in a CSS file is relative to the CSS file itself. This means that the path starts from the directory where the CSS file is located.

Example

Consider the following layout:

• Page: page.htm (location irrelevant)
• CSS: /resources/css/styles.css
• Image: /resources/images/image.jpg

Inside the styles.css file, you might have the following CSS rule:

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

In this example, the relative path ../images/image.jpg starts from the directory where the styles.css file is located, which is resources/css. Therefore, the path refers to the image located at /resources/images/image.jpg.

The above is the detailed content of Relative Paths in CSS: Are They Relative to the CSS or HTML File?. For more information, please follow other related articles on the PHP Chinese website!