Hello,

Unfortunately, you’ll have to use two Wrappers to have an image with the dark overlay on top. The way the properties are abstracted out won’t allow for multiple backgrounds in a way where you can adjust the sequencing.

Hey ​@big_red_one, 

Unfortunately, our background builder does not currently make use of the background-blend-mode CSS property which is what you need to make that magic happen. If you have the feature enabled where you can use JSS to extend with code, then you can create a variant that could be reused anytime you want to blend your background image with your background color.

1. Open your design system in the DSS
2. Create a Wrapper variant and call it “Overlay - For Image Backgrounds”
3. Click the kebab button and select “Extend with code”
4. Paste the code below into the code editor
5. Click Done, click Save
6. Follow the instructions in the comments below

/*

 Use this variant to blend the background image and background color

 In the Page Designer,
  1. Select your wrapper
  2. Set the style variant to "Overlay - For Image Backgrounds"
  3. Set the Background Source to "Image"
  4. Specify your image
  5. Specify your color:
     1. Choose custom > solid
     2. Select the color
     3. Drag the opacity slider to the desired amount of opacity
*/

return {
  "wrapper": {
    "backgroundBlendMode": "overlay"
  }
}

Oooh, very cool. Thank you Joseph! So, it sounds like it’s halfway there, where setting the property in the background color does give us a value that can be used, but we just need the JS in order to take that value and combine it with the background image. Ok, good stuff. Probably beats having wrappers within wrappers everywhere, especially if you need them to behave like one element re: responsive width/height.