I've been slightly bummed about creating background overlays since I started using Oxygen because the styling has to be set at the ID level.

This is less than ideal because you have to recreate the style every time you want to use it (or copy and paste a section) and there's absolutely no future-proofing. If something about the style needs to change, you have to manually change it everywhere you've used it.

When I first tried to assign overlays to classes, it didn't work and I just abandoned it because I was busy. It was something I've wanted to revisit and I finally got a moment to really sit down and address the issue and come up with a workaround.

I'm just calling this technique "Custom Overlay Classes" and there's three parts to the technique:

  1. Assign an overlay class to a section using a specific naming convention (e.g. ".overlay--")
  2. Assign the overlay styling to the ::after pseudo-element of that class.
  3. Use z-index to elevate the content in that section above the overlay.

EDITED: When I first was doing this I tried to put styling in the ::before element, but I missed a small detail and things weren't working. I moved to doing it in the ::after, but this is no longer necessary. I'm leaving the old instructions up because you can still learn things from them, but scroll down and use the new instructions for implementation.

OLD INSTRUCTIONS

Step #1: Assign an overlay class to a section with a background image.

  1. Create a section with a background image set to "cover."
  2. Set the left and top positioning to "50%."
  3. Add the class "overlay--primary" to the section.
  4. Set the position of that class to "relative."

Step #2: Style the ::after pseudo element of that overlay class.

  1. From the "state" dropdown of your overlay class, choose ":after."
  2. Set the position to "absolute."
  3. Set the top, right, bottom, and left to "0."
  4. Style the overlay.

Step #3: Change the layer order so your section content shows up on top of the overlay.

You'll notice that the overlay covers all the content in your section. In order to correct this, we need to use z-index to bring the content to the front.

In Oxygen, all content in a section is contained by that sections inner wrapper, so all we need to do is elevate the inner wrapper to the front and everything inside it will come with it.

To do this, we need to create a rule that targets any section that has your overlay class. Except, we shouldn't target any one class in particular because that won't be future-proof. Instead, we should target any section that has a class that contains your overlay naming convention, "overlay--".

Here's the code that does this:

.ct-section[class*="overlay--"] .ct-section-inner-wrap {
	position: relative;
	z-index: 1;
}

[class*=""] is a selector that searches and selects any class that contains whatever you put inside the quotes.

So, our code is searching for any class that contains "overlay--" that also happens to be attached to a section. When it finds a section that fulfills those requirements, it targets that section's inner-wrap (.ct-section-inner-wrap) and uses z-index to elevate it to the top.

NEW INSTRUCTIONS

Step #1: Assign an overlay class to a section with a background image.

  1. Create a section with a background image set to "cover."
  2. Set the left and top positioning to "50%."
  3. Add the class "overlay--primary" to the section.
  4. Set the position of that class to "relative."
  5. Set the z-index of that class to "0."

Step #2: Style the ::before pseudo element of that overlay class.

  1. From the "state" dropdown of your overlay class, choose ":before."
  2. Set the position to "absolute."
  3. Set the z-index to "-1."
  4. Set the top, right, bottom, and left to "0."
  5. Style the overlay.

Now you're free to add as many overlay classes as you want. As long as you use the same starting convention, "overlay--" you'll never have a content layer issue.

You also have the full range of styling options, from double overlay colors, to gradients, to patterns, to more images, to custom code, to filters, to blend modes ... the whole bag of tricks.

Have fun!