Header Background is cut on mobile view

The background image is far too wide compared to its height. Therefore it is difficult to crop it exactly to include the complete width. If you try doing that on a narrow screen, it will not cover the menu which will show in a dark background.

The best option I could figure out with my basic skills is this

Change this line in your custom CSS

#site-header {background: url(https://colorigadget190968337.wpcomstaging.com/wp-content/uploads/2020/08/acquerello6.png);}

to

#site-header {
    background: url(https://colorigadget190968337.wpcomstaging.com/wp- 
    content/uploads/2020/08/acquerello6.png);
    background-size: contain;
    background-repeat: no-repeat;
}

It makes it crop better than earlier. It will not show 100% of the width though

Unfortunately, on mobile the logo goes below the image, while I’d like it to remain in front of it.
Maybe if I resize the background image to the preferred size it would work better, so which is are recommended dimensions?

Thanks for your help

Complementary to what @nagpai said:
You should use background-size: cover; instead.
This way the image will resize responsively and will try to cover as much space as it can without repeating. background-repeat will then become obsolete.
The image will not show in its full width (due to its dimension) but it will fill the header in a “nicer” way.

#site-header {
    background: url(https://colorigadget190968337.wpcomstaging.com/wp- 
    content/uploads/2020/08/acquerello6.png);
    background-size: cover;
}

@scriks :
The logo remains in front. Because of the contain/no-repeat settings, it was just hidden due to your black background since the image was not repeated anymore and therefore not filling the full header element.

Yes it worked great with the

background-size: cover;

Thanks everybody