2 Ways To Create Colour Background Sections on Squarespace websites
This is one of my top Squarespace tips for creating colourful, engaging websites. Whatever you call them; strips, sections, slices; these are a great way to make a long scrolling page interesting and easy to scan. Segmenting content into strips/sections/slices with different coloured backgrounds keeps content about the same content grouped neatly and separate from other content topics.
Squarespace uses the Index page feature to help you achieve these sections and you can upload background images for each index section. Not all Squarespace templates have this feature so I've listed a selection of templates that do below. I get a lot of requests to have a flat colour rather than a background image. So how do you do it? Well...
Method 1: background image
In a photo editor such as Photoshop, create a new image that is around 50 x 50px. Fill it with a colour of your choice and save the image as a jpg. In Squarespace go to the settings menu of a page within an index. Click Media and upload your square colour jpg as the background image. Repeat for each index page you want to have a background colour
Squarespace will stretch the image to fill the background area. Because it's just a flat colour it won't deteriorate in quality.
Method 2: custom CSS
When you create a page within an index, that page is given an ID. So if you name the page (section) "Hero Section" the ID will be "hero-section".
Go to DESIGN > CUSTOM CSS and add the following code:
#hero-section {
background: #333333
}
For your own code, change #hero-section to #your-id and #333333 to the hex value of the colour of your choice. Save it and view your website - you should see your background colour. If you don't make sure you remove any background images for the page (section) using the settings menu.
This method allows you to do fancy gradients as well using CSS code. This is much smaller in file size than using an image, making your website faster to load. For example:
#hero-section {
background: #f0f9ff;
background: -moz-radial-gradient(center, ellipse cover, #f0f9ff 0%, #a1dbff 100%);
background: -webkit-radial-gradient(center, ellipse cover, #f0f9ff 0%,#a1dbff 100%);
background: radial-gradient(ellipse at center, #f0f9ff 0%,#a1dbff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=1 );
}If you search Google for "css gradient generator" you'll find plenty of easy-to-use tools to create the gradient background code for you.