How to add a Background Image to A Squarespace Gallery Section

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About This Tutorial

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 tutorial, you'll learn how to add a custom background image to your gallery sections using a little bit of code.

We're going to upload your image, grabbing the necessary data section ID, and update the CSS code below to change the background of your gallery section to a full with image. You'll learn how to control the size, position, and attachment of your background image for a truly customized look.

Squarespace Tutorial

Code Example

Here are the codes used in this tutorial.

You’ll find more selectors and codes like this inside the Squarespace CSS cheat sheet, available at insidethesquare.co/css

[data-section-id] .section-background{
background-image: url (url-goes-here);
background-size: cover;
background-position: center;
background-attachment: fixed
}

---

Related Content

#️⃣ Block ID extension →insidethesquare.co/chromeext

🎓 Free Code Training → insidethesquare.co/learn

📚 Squarespace CSS Code Collection → insidethesquare.co/css

📄 Tutorial: Add code to a single page → insidethesquare.co/squarespace-tutorials/single-page

🍿 Free Squarespace tutorials → insidethesquare.co/tutorials

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help