I am encountering a problem with a client’s specific request, and need urgent help.

On this page (and all the others, but let’s use the index for example), I have the hero section responsive, and it works fine.

https://www.cri8ive.it/MStest/index.html

However, the client wants that the image remains positioned where it is when the page is scaled down (90%, 80%, 70%) and the white text (and the semi-transparent blue wave) also resizes so that it remains consistently in the same position compared to the image.

But for some reason I can’t seem able to do it. I don’t get what I should be doing to achieve that effect. I’ve been fiddling with the code nonstop, but it just escapes me.

Can anybody help me working on the code itself? Examples with different code specifics won’t really help because I am in a “burnout/meltdown” phase where my brain no longer understands what I’m doing (I’m a recovering depressed, and yesterday’s anxiety attack hit hard), so if I see it work but my code is different in terms of classes, names and whatnot, I won’t be able to adapt it. Not in the mindset I’m in at the moment. However if you can help me with code snippets including commentary, that’d help my brain refocus and figure out things.

One important thing; I can’t make the header background image an actual background-image property – it must be an image with lower z-index – because, in the “Dispositivi” page, they want it to be a carousel. So since the layout must be the same for all the pages, it is mandatory that I make it work while keeping the image – well, an image inside a div.

Deadline is very tight, I need to have this site wrapped up by Sunday, but ideally if I can finish it today it’d be better. They won’t pay me until it looks exactly like they want, and I have an impending payment that I can’t cover if they don’t pay me.

Please, utmost urgency, help me.