How to use an image for list item in Squarespace // Custom List Item Background tutorial

List sections are auto layouts that can have an image, title, description, and button. They can have a unique background color, and they can have an image too, thanks to the codes in this tutorial!
- - -
- - -
In this Squarespace tutorial, you’ll learn how to upload your own image to use as the background of alist 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 code 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
}

- - -
I use this free Chrome extension to grab data section and block id’s; not affiliated - just a fan!
- - -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
- - -
- - -
- - -
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

[InsideTheSquare]

⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!

[MrDorinruga]

Hey Becca, just found your page and I love it! Thanks for all the hard work. I'm running into a dilemma and need some help. How do I increase the point size of the font on a carousel image block? I'm trying to showcase a series of images that are related to one another and as you scroll through it the assigned message or caption changes along with it. :(. I hope to hear from you

[PebblesMcWilly]

Love your content! It's helped me stylize my website the way I want to and give me ideas!

What I'm looking for is a way to display 3 cards that list my packages and then a button that changes the 3 cards to 3 different cards. Basically we offer photography and videography so I'd like to show the different packages for both without creating 2 sections. Could you make a video on something like this?

[reboundpt]

How would you just target the first card in a item-list? Would be appreciated!