Background Image Overlay Opacity in Squarespace 7.1
Background Image Overlay Opacity in Squarespace 7.1

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.

In the video above. I walk through an example of adding a background image overlay opacity to a section in Squarespace 7.1.

Here is the exact code I used in my example.

//OVERLAY OPACITY

#collection-5d6fe5b703b5ca000149463f{

section:nth-of-type(1){

.section-background-overlay {

opacity: .5;

}

}

}

//END OVERLAY OPACITY

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

Navigate to the page you want to change.

2. View » Developer » Developer Tools

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).
['Will Myers']
['Squarespace', 'Web Design', 'Freelancer', 'CSS', 'Websites For Startups']