Background Video Overlay Opacity in Squarespace 7.1

Article

Background images and videos are a necessity for modern websites. The problem with them thought, is that it’s sometimes difficult to read any text that is on top of them. In order to solve this problem, you’ll want to add an overlay between the image and the text. In this tutorial, I’ll go over a quick and easy solution to this.

If you add this to your website, add a link to your work in the comments section. I love looking at how other people customize this code for themselves.

Video

* Note: the code in this video has been updated so please use the updated code in the "Code" tab.

1. Add the CSS in your custom CSS area

2. Find the data-section-id of the section that with the background video

3. Replace the data-section-id in the CSS.

4. Customize the overlay color

Code

Add this code to the Design » Custom CSS area of your website.

Apply Effect To All Background Videos

section[data-current-styles*='"backgroundMode": "video"'] .section-background:after{
  content: "";
  position: absolute;
  top: 0;
  left:0;
  height: 100%;
  width: 100%;
  opacity: .5;
  background-color:black;
}

Apply Effect To Single Section

[data-section-id="SECTION_ID_HERE"] .section-background:after{
  content: "";
  position: absolute;
  top: 0;
  left:0;
  height: 100%;
  width: 100%;
  opacity: .5;
  background-color:blue;
}

Apply Gradient Background Effect

section[data-current-styles*='"backgroundMode": "video"'] .section-background:after{
  content: "";
  position: absolute;
  top: 0;
  left:0;
  height: 100%;
  width: 100%;
  opacity: .5;
  background-image: linear-gradient( to top, blue 0%, transparent 100%);
}