How can I add an overlay on image background ?

Question

Hey,I would to add an overlay [ rgba(0, 0, 0, 0.3) ] on image background in order to improve contrast message like in Webflow.I tried to add a gradient but it doesn't workThank you for your helpRomaric

John Siciliano · Answer

Hey we are creating a UI for this but what technically happens under the hood is a gradient is added. Background colors can't be added over images in CSS so what Webflow and what we will do is convert the single color to a gradient

John Siciliano · Answer

like linear-gradient(#333, #333)

John Siciliano · Answer

so just copy what you have in the color field and replace my #333's with that. Then add that as a gradient

Romaric BRN · Answer

Perfect! It works 🙏

John Siciliano · Answer

Nice! The UI for it will be in here btw https://github.com/orgs/webstudio-is/projects/11?pane=issue&itemId=65253933&issue=webstudio-is%7Cwebstudio%7C3448

Romaric BRN · Answer

upvoted

Join the Webstudio community

How can I add an overlay on image background ?