Responsively positioning content around background image

Hi all,

We’re getting a new website designed and will have a recurring theme across most of our pages.

This involves the hero section that has a background image (which is a basic shape, like the one below) with the header text and CTA positioned around that shape.

I’m having real trouble getting the headings and button that is positioned around the background image to be responsive for different sized screens.

At present, I am using the symbol as a background image then using relative positioning to make the text appear nicely positioned. Unfortunately, this positioning does not hold as soon as I increase screen size (i.e. is not responsive - see below).

What is the best approach for making this responsive?

Here is my site Read-Only:
Here is my published link:

@cyberdave @PixelGeek

Not sure if this is what I should be doing, but tagging some webflow heros I’ve seen on line so I can hopefully get an answer to this one.

Thanks guys!