Background Image Overlay Opacity in Squarespace 7.1 [UPDATE]

Feb 22

UPDATE:

**Squarespace has now added the ability to add an overlay to your background images!

To add an overlay to your background images, just open the background tab of your section editor and scroll to the bottom and adjust the slider there. Easy-peasy. The color of the background overlay can be changed in the Design » Colors » and edit the color theme for that your particular section.

Under sitewide, look adjust the Background Overlay to whatever color you want. Voila!

Squarespace 7.1 is out and a ton of the things are new. In this tutorial, I’m going to walk you through changing the background overlay opacity of a section.

Here is the exact code I used in my example.

See the Pen 1249eb341692a6329586198089595ded by Will Myers (@Will-Myers) on CodePen.

Remember this won’t work on your website. Here are the elements you MUST change:

Collection ID (#collection-5d6fe5b703b5ca000149463f)
Pseudo Selector (section:nth-of-type(1))

Finding the Collection ID

Squarespace page — 1. Navigate to the page you want to change.

Web inspector opened in browser — 2. Open up the web inspector

Finding the collection id in the web inspector — 3. Copying the “Collection ID” of your specific page

Selecting the Section

In my example, I’ve used what’s called a pseudo-selector to only apply the change to a specific element (sign up for my newsletter for more advanced tips on things like pseudo selectors). The number 1 in the line section:nth-of-type(1) is the number that corresponds to the section on the page that you want to select (or change). So, if you'd like the change the opacity on the background image overlay only on the background image on the thrid section, put the number 3 instead of 1.

Let me know if I’m missing anything in here. These tutorials are for you to learn more about doing this on your own without having to seek help every time (although we’ll never fully be there).

Squarespace 7.1