Overlapping elements on header

I am building a site which aims to replicate the following look and feel.

The issue is the text and the underlying color background in the main hero image. which i am finding difficult to recreate. I’ve tried playing around with Z-index and background colors but havent had any success.

Any help would appreciated as this is my first time on webflow.

https://preview.webflow.com/preview/juc-mevan?utm_medium=preview_link&utm_source=designer&utm_content=juc-mevan&preview=f27d55216e00926a6f587151a546ee46&mode=preview


Hey @mevan_perera :wave:

Not sure how bespoke you’re looking to take things with the design and so on, but a simple solution would be to add a div block inside the the hero section…

49

Give the new div block a desired max width, with a height of 100%. Set it to Position > Absolute (0 on top position and whatever you want on left position. I put 417 as example).

37

Choose a background colour for the div block and amend the opacity to suit. Then drop some text elements inside the div block and style as you wish.

Should look something like this…

For mobile, amend the position settings and the max width to make sure they work with smaller devices.

Hope this helps.

Hey @Esteban, much appreciated. I will try this out.