Adding Visuals to Pages: CSS

This guide helps you add visuals such as images to your pages using a CSS file and access and display the image through its relative path.

Prerequisites

To follow the steps in this tutorial, you should be familiar with the required directory structure for your codebase. In addition, you must understand the concepts of pages, layouts, and assets. Please visit the following resources should you need a refresher:

• Codebase
• Pages
• Layouts
• Assets

Steps

Adding visuals to your pages using a CSS file is a three-step process:

• Step 1: Creating the 'styles' and 'images' directories
• Step 2: Creating a CSS file
• Step 3: Linking to the CSS file in your layout

Step 1: Creating the 'styles' and 'images' directories

If you are starting from scratch (without having created the codebase), create an directory inside , then a and an directory inside .

If you have already created the codebase, you can skip this step and locate your and directories.

Put an image in the images directory (e.g. ).

Step 2: Creating a CSS file

In the directory, create a file:

Here, in a static CSS file, you can't use the filter or liquid variable to get the URL of the image on the CDN, so you have to refer to it with its relative path.

On your computer, the CSS file is in the directory, so to point to the image file in the directory, you have to go one level up from () to the directory, and then write the path relative to there.

This directory structure corresponds to the directory structure on the CDN, so the relative path works the same way on your Instance.

Step 3: Linking to the CSS file in your layout