Prevent background image in a section from changing on different screen sizes

I am trying to design a page where the background to the section below the header bleeds into the header so it all looks like one section as seen here: https://ukulele-grapefruit-hcl3.squarespace.com/ . It's a grey section going up into the header and the section it was placed in. My issue is that I'm trying to allign that and the artist's name so her name (font color white) is in the grey area  and the word "Art" (font color in black) is placed outside the grey area in white. 

My issue is that I can get it just right on one screen size but another screen size and it's no longer aligned correctly. I can duplicate this problem just by reducing my window size.

Does anyone have a code or some work through to make this design work?

Thanks!

Hi,

The site is private. You can follow this to share url, we can check problem easier

Thanks @tuanphan. I set a password as "123". This is not a paid subscription yet so Squarespace will not let me put it as Public. Will you check to see if this password allows visibility? Thanks 

Do it like this?