Header Background dimensions for responsive layout

[Cavendish]

Cavendish

January 18, 2017 at 9:11 am

I can’t figure out how to get the header background image to resize normally along with the rest of the layout. As you can see from the site in progress, there seem to be several breakpoints where the image is resized or cropped differently, rather than smoothly resizing along with the type:

*Login to see link
password to view the site: spam7

my goal is that the header image resize smoothly along with the type, and not get cropped. To get a working result I had to add a lot of white space to the right side of the image. That was via a lot of trial and error. But I want the image to fill the available space, i.e. no extra white space needed.

What are the ideal dimensions for this image?
What is the best way to get it to resize smoothly across different screen sizes?

Any help or advice much appreciated. Thanks