Responsive header image

I am new here. I have been looking into solving a problem I have been having for a while. I have setup my header image to be different for mobile and desktop. So far so good. However for screens with a really high resolution (e.g. new iMac of Surface Studio) the image only fills a small part of the screen as it is only 2000px wide. The image is setup to show the full hight of it because that is what I want. However it doesn't make sense for really high resolutions as it takes into account the hight and just leaves the rest without image.

This is my site: https://baniwafels.be/

Extra problem: the menu doesn't stick nicely to the right of the logo.

I have been playing around with the css but I am not figuring out a way to fix it.

The end goal is to have a nice responsive image that shows everything until the screen resolution gets too high and to have a menu in two parts with the left part starting next to the logo at all times.

Thanks for the insight!