Setting unique color overlays on CMS background images

Hi

I’m trying to set unique background color overlays to each protection page template item. Please see video below.

If anyone can advise how to do this I’d be very grateful.

Share link below…
https://preview.webflow.com/preview/new-wave-financial?utm_medium=preview_link&utm_source=designer&utm_content=new-wave-financial&preview=4981691cb8e39036b9de430077fa583f&pageId=5b3f63cfd9d92e3017707c96&itemId=5b3f63cfd9d92e9073707cab&mode=preview

Thanks

Hi @GrahamCox,
quick workaround for you.
Create a container (important, position relative), move your cms image div into your container and. Set it’s position to absolute and let it fill all available space. Then duplicate your image, unset the cms connection and set your background color (the transparent one). Give this a combo class and a z-index of for example 2. (It has to be bigger than the z-index of your image-div).

Maxi

Thanks @MXI for the quick response, I really appreciate it.

Can you clarify one thing please. Is ‘Important’ a setting or is it important to set position relative)? If the former, how do I set it please?

Hi @GrahamCox,
I mean it is important to set it to position: relative.
Why? If you set a children of your container to position absolute and let it fill the available space, it will fill your whole page. Therefore you have to set it’s parent to position relative, so the children will get just as big as the parent.

A screenshot, where you can find the position settings.

Maxi

Thanks @MXI for clarifying. All makes sense. Many thanks.