Background Image + Overlay

I’d like to have a background image with a transparent overlay. I’ve got the background set and the overlay color set, but I don’t see a way to make the overlay sit above the background image. What am I missing here?

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/balance-1c7d6b?utm_medium=preview_link&utm_source=dashboard&utm_content=balance-1c7d6b&preview=159b3e3d0585399c007d6d01f090a734&mode=preview
(how to share your site Read-Only link)

Hey Scott, I wasn’t able to tell which part of the section is suppose to be the overlay but anyway, the easiest way to add an overlay on top of the BG image is to add another ‘Image & Gradient’ layer. Just click the ‘+’ icon again and set it to the last option. It’ll be a black overlay by default.

Screen Shot 2020-08-11 at 06.46.30

2 Likes

I assigned the bg image first, then created the purple color. Now, I see that setting Color to the purple swatch is setting the bg color, and is a different thing than creating an overlay. Thank you.

Do you have an example of what you’re looking for? Or maybe you can point out which element is suppose to be the overlay.

I got it working. I just misundertood the Webflow interace. Thanks for checking in :slight_smile:

1 Like

Here is my workaround:

3 Likes

Great solution! It works for static images, but doesn’t support images from a CMS collection, unfortunately.