Container alignment inside hero section

Design help General
1

How do I align a container inside the section so that the text overlays the same part of the background image?

This is how the text in the hero currently looks:

Current
Current1892×630 135 KB

This is how I would like it to look:

mockup-landing page
mockup-landing page1507×816 101 KB

Here is my site Read-Only: https://preview.webflow.com/preview/better-meetings?utm_medium=preview_link&utm_source=designer&utm_content=better-meetings&preview=af3ed6259c9035a98b41b0b49117985f&mode=preview

2

Any ideas on how to do this?

3

Hi Steve,

Thanks for your reply, I would recommend to set the Section having the background image to a relative position and then use absolute position on the text to align that to the section.

For background images you cannot align the position, but you can put an image into a relative positioned parent element (the section) and then use absolute positioning on both the image and the text and use a different z-index value for the text and image to layer them on top of each other.

I hope this helps!