Hello
Thank you for sharing your solution.
By default the background header image has a background-szie property set to 'cover' (
https://www.w3schools.com/cssref/css3_pr_background-size.asp). This means the background image will fill the header area while keeping the correct dimensions. This will result in some cropping on some screen sizes. Your CSS is correct in that it ensures the full image is always displayed.
Ciaran