How to add a background image to a page 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

This tutorial will teach you how to upload your own image to use as the background of a page on your Squarespace site, no matter how many page sections you have!

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.

I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

In this tutorial we are going to upload an image to your site, and then adjust the CSS code below so that image shows up behind all your content.

Here is the code from this tutorial; be sure to replace url-here with the url for the image you uploaded to your Squarespace site!

Add the image as a background:

#page{
background-image:url(url-here);
background-size: cover
}

Make the page section backgrounds transparent:

#page .page-section {
background: transparent!important
}

#page .page-section .section-background {
background: transparent !important;
}