Add an Overlay to One Section

What does this code do?

This code snippet will allow you to add an overlay on one section in Squarespace.

Code Snippets

Squarespace 7.0

Copy and paste this code into Design > Custom CSS

/* Overlay */
#PAGEURL {
  background-color: hsla(0, 0%, 0%, 0.2);
}

Squarespace 7.1

In Squarespace 7.1, you can add an overlay to a section by clicking on the pencil, selecting Background, and then moving the Overlay Opacity slider to the overlay of your choice. If you do not see any change occuring, it could be because the overlay is set to transparent in Design > Colors.

How To Use It

1. Copy and paste the code snippet as indicated above.

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

3. This code is set to add a black overlay to the section. To edit the overlay, change the hsla numbers. The first three numbers set the colour. The last number sets the opacity. You can find some more hsla colours here.