Text link overlay image issue

Hey guys,
I’m getting very frustrated with this issue, I want to place text on top of my banner on this simple web page and will be clickable, the issue I am having is that the text will not stay aligned when viewed the live preview


It looks fine in the editor


but in the live preview you can see that its way off :frowning:

I was wondering does anyone know a work around?

Thanks

Link: https://preview.webflow.com/preview/esm-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=esm-landing-page&preview=971501cecc66a6c79c495208f2ff433e&mode=preview

Hi Joe,

As a general practice, you should separate background and foreground elements.
Your background in this case should be only the map, not text, no icons. Your foreground should be a div with all the other elements inside it (with some hierarchy).
This way they will all act as one group.

What happens is that your background image stay in a position relative to the center of the screen, while the text block is aligned to the left.

Hey Aviv

So should the banner be a image element or a div?
Can you do a little demo for me?

Thanks

You can open or clone any of the free Webflow templates, and look how the elements and backgrounds are used.