CSS Image Path Conventions

This article is a guideline on how to link other files such as images in your stylesheet or CSS file and what are the best ways to specify file paths.

Overview of File Paths

A file path identifies a file’s location within the folder hierarchy of a website. When referencing external files, file paths such as:

• a website
• Images
• Java Scripts

There are two types of Paths:

1. Absolute Path
2. Relative Path

Absolute Path With Example

An absolute path is a file path that shows the file’s complete URL regardless of where your current file is. For example:

background-image: url(https://www.exampleSite.com/images/image1.png);

Relative Path With Examples

A relative path is a file path showing the file’s path for the current folder. For example:

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

It is in the current website’s root directory’s images folder. Consider another example:

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

It is a path of image1, placed in the images folder present in the current folder.

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

It is a path of image1, placed in the images folder present in a director previous to the current directory. Note that ../ means one level up from the current directory. The more you want to go up the directory hierarchy; you can use more ../.

Best Practices to Specify the Path

The best practice to specify the file path is through the relative path. Using relative file paths won’t tie your web pages to your current base URL. Instead, all links will function on your personal computer (localhost) and any future public domains you create.

Therefore, it is always recommended to be very careful while specifying the file paths in your website’s HTML and CSS pages and give the paths so that you do not need to change them in the future when your base URL changes.