How to use an image for list item in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this Squarespace tutorial, you’ll learn how to upload your own image to use as the background of a list item in Squarespace.

All the codes from this tutorial are below, BUT there are a few things you need to know:

→ This is specific for list page sections in version 7.1, an auto layout found under the people section.

→ You can use a PNG or a JPG

→ There is more than one way to do this! Code is super customizable, and this is my technique.

Here are the steps from this tutorial:

→ Create a list section

→ Upload your image: design → custom CSS → manage custom files

→ Paste the code below

→ Update the text image-url-here with your image url from your custom files

---

Here is the basic code from this tutorial:

.list-item{
background-image:url(image-url-here);
background-size: cover
}

Here is the code from this tutorial for the PNG image:

.list-item{
background-image: url(image-url-here);
background-size: cover;
background-position: center;
background-color: transparent!important
}