I struggled with this for a long time. I think the idea of having an expansive header is awesome, but realistically it only looks good on computer screens for now. I'm not an expert, but if there was a way to change the image at certain breakpoints that would be amazing.
For the time being here's what I did.
1. Got rid of the concept of using the full header space.
2. Disabled the parallax effect.
3. Created an image file that measured 700px x 650px.
4. Created this CSS code to coincide with the dimensions.
background-size: 100% !important;
height: 500px !important;
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
Here's how it looks on my site:
This is simply what worked for me, albeit it's not exactly what I wanted in terms of the header layout, but it is definitely responsive now. I'd rather see the full header on a phone and computer screen, so I was willing to give up the real estate size. I would like to see the theme have an option embedded on how to change the image out at different breakpoints, may be asking too much, but I'm still searching for other options. if I come across any other solutions, I'll let you know.
Best of luck,