HTML CSS – File path quick tips

Whenever I have a problem with an image “not showing up” on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning that it doesn’t start with http://), then I need to pay extra attention to the relationship of where the file is referencing the image, and where that image actually located.

• Is the image in the same directory level as the file referencing it?
• Is the image in a directory at below level?
• Is the image in a directory at up level?

By “below level” and “up level”, I mean sub-directories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at the following primitive example:

Here is all you need to know about relative file paths:

• Starting with “/” returns to the root directory and starts there
• Starting with “../” moves one directory backwards and starts there
• Starting with “../../” moves two directories backwards and starts there (and so on…)
• To move forward, just start with the first subdirectory and keep adding corresponding folder names to move forward