How to add a background color to a section of your Squarespace website

Long scrolling websites have been very popular for some time now. However having just a white background and lots of text, mixed up with some images can be a bit boring. It is often nice to split it up with different colors or images in the background.

In this blog post I want to show you how you can create this effect on your Squarespace website. How you can have sections of a page with a different colored background.

How to add a colored background section to a Squarespace website | MNFL Design


In order to achieve this effect in Squarespace you need to use so called Index pages instead of the normal pages. And it’s best to use a template within the Brine family. As in these templates you can easily achieve the desired effect by having a section of your website with a different color and adding normal text blocks or any other blocks on top.

So first you need to add the index page. You can name your index page just like you would name a normal page.

With index pages you can add sections to the page which can all have a different background. Just click on add section, give your section a name and you can start editing the page.

To each section you can add an image as a background or you can add a color. And this is how you can achieve your desired look.

72 How to add a background color to a section of your Squarspace website | MNFL Design
3.72 How to add a background color to a section of your Squarspace website | MNFL Design

In order to add the background image or color to a section of your page you click on banner or on the wheel next to the section and add a banner background image.

4. How to add a background color to a section of your Squarespace website | MNFL  Design
5 How to add a background color to a section of your Squarespace website | MNFL Design
6 How to add a background color to a section of your Squarespace website | MNFL Design

If you want to add a color as the background, you need to upload an image, a jpeg file, with just one color. In order to create that you can use a design program like Adobe Illustrator to do that or an easy way to do this is to go to canva and just create a jpeg with one color. This can be any size.

And then you upload it.

How to add a background color to a section of your Squarespace website | MNFL Design
How to add a background color to a section of your Squarespace website | MNFL Design
How to add a background color to a section of your Squarespace website | MNFL Design

Now you just click save and you will see the colored background. In my example I have added two sections with two different colors.

How to add a background color to a section of your Squarespace website | MNFL Design

You can now add any Squarespace block you would like to this colored background, by clicking on edit and selecting the block you like.

In this example I have added a text block and an image next to it. I am editing this just like I would any other page.

How to add a background color to a section of your Squarespace website | MNFL Design
How to add a colored background in Squarespace | MNFL Design
How to add a colored background in Squarespace | MNFL Design

If you prefer a video tutorial, here is a video on how to add different colors to section of your Squarespace website.


Join the community

Newsletter blog post optin in image emilia

This is me writing blog posts every week

If you enjoyed what you read just now and would like to get more tips and tricks about branding, website design, business and Squarespace straight to your inbox - sign up for my weekly Newsletter and I promise you will find help and support!

Nobody needs to be alone when starting and running a small business!

I won't send you spam and you can unsubscribe at any time. Powered by ConvertKit

These posts might also help you: