Adding Visuals to Pages: CSS
This guide will help you add visuals (images) to your pages using a CSS file, and accessing and displaying the image through its relative path.
Requirements
To follow the steps in this tutorial, you should be familiar with the required directory structure for your codebase, and understand the concepts of pages, layouts, and assets.
Steps
Adding visuals to your pages using a CSS file is a three-step process:
Step 1: Create styles
and images
directories
If you are starting from scratch (without having created the codebase), create an assets
directory inside app
, then a styles
and an images
directory inside assets
.
If you have already created the codebase, you can skip this step, and just locate your app/assets/styles
and app/assets/images
directories.
Put an image in the images directory (e.g. logo.svg
).
Step 2: Create CSS file
In the styles
directory, create a page.css
file:
.logo {
background: transparent url("../images/logo.svg") top center no-repeat;
}
Here, in a static CSS file, you can't use the asset_url
filter or {{ asset_url }}
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 app/assets/styles
directory, so to point to the image file in the app/assets/images
directory, you have to go one level up from styles
(..
) to the assets
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: Link to the CSS file in your layout
<link rel="stylesheet" href="{{ 'styles/page.css' | asset_url }}">
Sync or deploy. The image is displayed on your page.
Next steps
Congratulations! You have learned how to add an image to your pages using CSS. You can also learn about adding visuals to your pages in Javascript.