Responsive Header

Hi

I would like to set a header background for my site, but am finding that the 1950×500 image I add to the header section gets cropped and does not resize on smaller devices.

I would like the background image to fit in the header and also to be responsive.

I have tried some custom CSS as below which seems to help, but am not sure if this is correct. Can you assist?

.site-header {
background-size: contain;
background-repeat:no-repeat;
background-position: center !important;
}

The page I need help with: [log in to see the link]