Thanks for the answer, and unfortunately it doesn't really solve the problem.
You have to specify the height of the header using a fixed value, which means that as you decrease the width of the browser window, the width of the header reduces, but the height does not (until you reach whatever arbitrary width you have designated as 'tablet' sized). This means that shape of the header changes, and based on a very quick test, the background header image is 'dynamically cropped' to ensure it fits the new shape.
Eventually, as you continue to reduce the size to 'tablet' dimensions, the tablet view kicks in, the page 'jumps' to that view (with the correctly proportioned image once more), and then the same issue kicks in until you reach 'mobile' width - as you resize the width of the page, the width of the header changes but the height remains the same.
I would like the height of the header to also scale in some way, not just the width. For example, you could set the page width to say 80% with have an option 'Set max-width = x pixels' (or have an option to lock it to the background image size), and in the header, set an initial height (again either some set value or lock it to the background image), and then an option to 'maintain header aspect ratio' such that if the width is reduced, the height is reduced by an appropriate amount.
This does seem possible via CSS (I've found some suggestions on stack overflow with appropriate CSS and demos, (not sure if it's acceptable to post the link here) but I of course have no idea how easy or hard that might be to implement in TT.
I will have a play and see if I can come up with some option that works for me.