Split Background Color

What does this code do?

This code snippet will allow you to have two colors in the background split vertically so that you have one color on the right and one color of the left.

Note: To help your design look great on multiple devices, this code has been placed inside of a media query so that it does not apply on mobile.

Note 2: You do not need code to create this look in the Fluid Engine Editor in Squarespace 7.1.

Code Snippet

Squarespace 7.0

Copy and paste the following code into Design > Custom CSS

@media only screen and (min-width: 640px) {
  #PAGEID {
    background: linear-gradient(90deg, #014421 33%, white 33%);
  }
}

Squarespace 7.1

Copy and paste the following code into Design > Custom CSS

@media only screen and (min-width: 640px) {
  #COLLECTIONID #page .page-section:nth-of-type(2) .section-background {
    background: linear-gradient(90deg, #014421 33%, white 33%);
  }
}

Or you can use…

@media only screen and (min-width: 640px) {
  section[data-section-id="YOURSECTIONIDHERE"] .section-background {
    background: linear-gradient(90deg, #014421 33%, white 33%);
  }
}

Customize

To customize, change the colors and percentages to match your brand and style.

For example, if I wanted the background to have white 40% of the way across and then grey the rest of the way, I would use the following.

Squarespace 7.0

@media only screen and (min-width: 640px) {
  #PAGEID {
    background: linear-gradient(90deg, grey 40%, white 40%);
  }
}

Squarespace 7.1

@media only screen and (min-width: 640px) {
  #COLLECTIONID #page .page-section:nth-of-type(2) .section-background {
    background: linear-gradient(90deg, grey 40%, white 40%);
  }
}

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a page id, collection id, or section id, check out our Start Here guide.

3. Change the color and percentage to match your brand and style.