How to create a split color page section background in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Can you upload any image you want for a page section background? Sure you can! But one line of CSS can load a lot faster than a full screen image can. Plus your code will keep the design proportional no matter what screen size your content is being displayed on. 😉
In this tutorial, you’ll learn how to use a linear gradient code to create a two color page section background. We’ll be using the code below to create a split color page section showing two solid colors horizontally, diagonally, and vertically. Be sure to watch the tutorial to learn how to isolate one page section at a time!
Video tutorial
Code Example
Here are the codes from this tutorial. Be sure to add your data section id at the very beginning of the code to make this work for your own unique website:
This code creates a horizontal line, showing the #fff color at the top and the #50bdb8 color at the bottom.
.page-section .section-background
{background: linear-gradient(to bottom, #fff 50%, #50BDB8 50%)!important
}
This code creates a vertical line, showing the #fff color on the right and the #E5F5F6 color on the left.
.page-section .section-background {
background: linear-gradient(to right, #fff 50%, #E5F5F6 50%)!important
}
This code creates a diagonal line, showing the #fff color on the top right and the #E5F5F6 color on the bottom left.
.page-section .section-background {
background: linear-gradient(15deg, #fff 50%, #E5F5F6 50%)!important
}
