Divs on background-image should be fixed on specific point on image

Hey guys,

I have a background with people on it. There should be a div exactly above those people.

So I created 3 divs that I positioned relative to the background image using %. Looks great, until you resize your browser. The divs do not stay in place, the are scaling with the browser and because of this the divs are not positioned correctly above the people when you change the browser width.
I will show you in the screenrecording underneath.

ezgif-7-6fe7517f548d

How can I fix this? Is it possible that you pinpoint an exact position on the image where the div should be and stay when even when the browser width changes?


Here is my site Read-Only:
https://preview.webflow.com/preview/up-campagne-480a1c7bdd86ddf52411b1a23a1?utm_medium=preview_link&utm_source=designer&utm_content=up-campagne-480a1c7bdd86ddf52411b1a23a1&preview=fa6b1971d4fae8676b10672640e6b05f&mode=preview

Link to the page:
https://up-campagne-480a1c7bdd86ddf52411b1a23a1.webflow.io/