Apply Overlay to Background using Dynamic Style Settings?

Design help General
1

I am using Dynamic Style Settings to retrieve images from a CSS collection and display them as background images on a grid with CMS content overlaid on top. I am trying to display an overlay on top of the background image to make the text more readable and darken the image. I am familiar with how to accomplish this normally but I do not seem to be able to get an overlay applied.

The div in question in my read only site is Value Prop Elements Home on the Home page.

Is there a way to do this in Webflow, or do I need to process the images manually before uploading them into the CMS collection item?

Here is my site Read-Only: https://preview.webflow.com/preview/thrio-new-website?utm_medium=preview_link&utm_source=dashboard&utm_content=thrio-new-website&preview=0073f63bea03744fff5affdd7abca3c4&mode=preview

2

Hi @eyeheartny, hope this video helps you in your process: Loom | Free Screen & Video Recording Software | Loom

5 Likes
3

Brandon, that was AWESOME. Thank you! Works perfectly. Now I need to figure out how to change the text color on hover to do some really cool stuff. Thanks again!!

4

There actually another way without the div! But if u get stuck lmk?

5

@QA_Brandon thanks for taking the time to post this video - it’s just solved an issue I was having :slight_smile:

1 Like