How to create custom background text for page sections in Squarespace 7.1

Jan 26

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 show you how to create background text for sections in Squarespace 7.1 That’s text that will show up behind images and other text on your site, but in front of your section background color and/or images.

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.

Check out the video to see the step-by-step process you need to take to make this work on your own site, and how to customize the code to look amazing on your own site!

Download Transcript

Here is the main code from the tutorial.

Navigate to your custom CSS ( Design → Custom CSS ) and paste this code below. Be sure to change the content to the word/words you want to use, and adjust the bottom margin and font size for desktop (first part of the code) and mobile (second part of the code)

#page .page-section .content-wrapper:before{
content:"sweet";
position:absolute;
bottom:0;
left:0;
margin-bottom:-10%;
font-size:300px;
opacity:.1;
z-index:0;
}
@media only screen and (max-width:640px){
#page .page-section .content-wrapper:before{
font-size: 5rem;
margin-bottom:-5px !important
}}

Want to isolate one section at a time?

Instead of #page .page-section .content-wrapper… start your code like this example instead, changing the number (1) to the section you want to isolate, first (1) second (2) third (3) and so on.