Add a background image to a gallery section

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, grab the necessary data section ID, and update the CSS code below to change the background of your gallery section to a full-width image. You'll learn how to control the size, position, and attachment of your background image for a truly customized look.

This tutorial is for Squarespace version 7.1 and will not work for older versions of Squarespace that don’t have gallery page sections. For more information, visit https://insidethesquare.co/themes

You’ll find the codes you need below, but there are many aspects that you’ll need to change to make this work for your own unique website. Please watch the tutorial video before adding these codes to your website to avoid any code mistakes. All video ads are skippable!

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


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

How to add a chapter description to a course overview page

Next
Next

How to create a numbered accordion block