A background pattern can make your Squarespace site even more unique, and this tutorial will teach you how to create one with code!

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.

Here are the steps from this tutorial:

→ Upload the image in your custom files.

→ Navigate to your design menu, select custom CSS, scroll down and click on manage custom files.

→ Click the arrow to drop your file here, or drag it over from your computer to that space to upload it.

→ Add the URL to the code (be sure to pick the right code from the options below).

→ Adjust the code; Remove the text image-url-here and click on your custom file in the manage custom files folder to place the image url into the code, then replace the words horizontal vertical with one to two values.

Here is the code for a page section:

#page.page-section .section-background{
background-color: transparent!important;
background-image: url(image-url-here);
background-size: horizontal vertical;
}

Here is the code for an entire page:

#page{
background-color: transparent!important;
background-image: url(image-url-here);
background-size: horizontal vertical;
}
.page-section{
background-color: transparent!important
}
.section-background{
opacity: .9!important
}

Here is the code for a blog post.
The second code for the inner wrapper is what creates the slightly transparent background behind the blog post content.

article {
background-color: transparent!important;
background-image: url(image-url-here);
background-size: horizontal vertical;
}
.blog-item-inner-wrapper {
background:rgba(255,255,255,.85);
padding: 1rem
}

Here is a link to the chrome extension I use in the video; not affiliated with them, just a fan!