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!
- -
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
- -
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!
https://chrome.google.com/webstore/de...
- -
💸 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 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
- -
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
- -
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
- -
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
- -
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 ♥
Watch video How to use an image for list item in Squarespace // Custom List Item Background tutorial online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 11 October 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,654 once and liked it 49 people.