Header + Hero Layout Problem

Hello! I've been spamming front-end mentor projects as I'm a self-taught coder and lately in the projects I've been having a difficult time with the layout of the header + hero section, specifically when the background image is included in both. I will provide a screenshot of a design from one of the recent projects. As you can see in the design, the background-image of the person in the go-kart is included in both the header and the 'hero' section (you can argue if it is a hero section or not). You could think about putting the "IMMERSIVE EXPERIENCES THAT DELIVER" inside the header element, but I believe it doesn't belong there semantically. I then tried on a similar project giving the hero section element a position of absolute, applying the background image to it and then playing around with the positioning to pull it up to the top of the screen and then adding a bunch of padding + magic numbering it to make the layout work. This however seemed to be super inefficient and quite fiddily to make work. So on this project I tried a different approach. I asked Mr GPT for a different approach because I didnt like the previous one and it suggested I setup my markup like this <div class="hero-shell" <header> </header> <main> <section> </section> </main> </div> I tried this, and I was able to make it work for the mobile design. However as soon as I attempted to make it responsive on larger viewports it started to get super complicated. I dont even know if this approach is good at all? As soon as I saw it, I was super skeptical about wrapping the entire header + main tag in a div when I dont want all the other sections (not listing in the fake html markup) inside the 'wrapper'. So I suppose my question is, what is the 'best' practice when it comes to a layout like this. There must be a common approach as this design is quite common across websites. Thanks for the help!!!