How to change a text block background 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

Text blocks can have a solid color background, and thanks to CSS we can customize it!

In this Squarespace tutorial, you’ll learn how to change a text block background color.

We’ll use CSS change to color, create a gradient color, and you’ll even learn how to upload your own image to use for the background of a text block.

I use this free Chrome extension to grab block id’s; not affiliated - just a fan!

Here are the codes from this tutorial:

Change text block background color

#block-123456 {
background-color: #50BDB8!important
}

Create a gradient background for a text block in Squarespace

#block-123456 {
background-color: transparent!important;
background: linear-gradient(45deg, red, yellow)
}

Upload your own image

#block-123456 {
background-color: transparent!important;
background-image: url-here;
background-size: cover
}