How To Change The Background Color of a Section in Squarespace
Are you looking to create a long scrolling website page with individual, defined sections? Assigning background colors for your page sections are a great way to achieve this. There are 2 different ways you can change the background color of a section within your Squarespace website. The first way involves no code and the second way involves a tiny bit of CSS. Note that both solutions require you to be using Index pages. If you’re not familiar with Index pages, they’re just a bunch of regular Squarespace pages, stacked on top of each other. They allow you to organize your website pages in a very user-friendly way. Learn more about Squarespace index pages.
February 2023 Update:
This solution only applies to 7.0 sites. Squarespace 7.1 has gifted us with the wonderful ability to easily change section background colors, directly in the editor.
Option #1: Use a Background Image
In the photo editor program of your choice (PhotoShop, Canva, etc…) create a new image. The size of the image doesn’t really matter, just don’t make it unnecessarily large. I usualy stick with 100 x 100 pixels. Then, fill the background of the image with the color of your choice. Download the image to your computer and then upload it as the background image of your Index page.
Click on the little gear icon next to the section you are changing the background color of
Click on the “Media” tab
Upload an image of a solid color as the “BANNER/THUMBNAIL IMAGE”
Option #2: Add Custom CSS
Get an HTML color code from a website such as htmlcolorcodes.com. The HEX code will look something like this: #FF5733. You can also use an RGB or HSL. Then, head over to your Custom CSS (Design > Custom CSS) and set this color code as the background color for your section.
Find your section ID by clicking on the little gear icon next to the section you are changing the background color of and copying the “URL SLUG”.
Open up your site’s Custom CSS (Design > Custom CSS)
Throw a hashtag symbol in front of the section ID (For example, if my section ID was “biography”, this would become “#biography”)
Add the following code to your CSS (replace the section ID and color code with your own)
#biography { background: #FF5733; }Browse Premium Squarespace Templates
My modern, service-based templates are designed for entrepreneurs and small businesses who are looking for a professional website design without breaking the bank. Each one of my templates include video tutorials for easy content upload / style tweaks. I also include my Advanced SEO Guide (a $500 value). This guide contains the exact techniques I use to help my SEO clients land on Google page 1.