How to Reference Resources in HTML When They Are in Different Directories?

Traversing Up the URL Path for Resource Referencing in HTML

When building a website, it's common to store resources like images and stylesheets in separate directories. To reference these resources in HTML, you'll need to specify their path within the source code.

For instance, if you're storing stylesheets in /styles and images in /images, you might wonder how to provide the correct path in stylesheets to locate images in the images directory.

The key here is to use the .. notation to indicate the parent directory. By adding .. before the path to the image, you're instructing the browser to look up one level in the directory structure.

For example, instead of using:

background-image: url('/images/bg.png');

You would use:

background-image: url('../images/bg.png');

This adjusted path tells the browser to move up one directory from the stylesheet location (/styles) and then navigate to the images directory.

The above is the detailed content of How to Reference Resources in HTML When They Are in Different Directories?. For more information, please follow other related articles on the PHP Chinese website!