Header background image size and responsiveness

Hi guys just me again.

I have set a header background image using the addtl CSS area of the Customiser, as below:

#header-inner.nav-type-2 #header-inner-bg {
background-image: url(https://theprojectcontrolpeople.com/wp-content/uploads/2021/01/Untitled Design-5.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#undefined-sticky-wrapper {
background: white;
}

The image size is 1140px X 300px.

It looks exactly how I want when in Customiser, so scales nicely. As soon as I publish and view it on the web it has scaled differently and is even worse on mobile devices.

Any advice on how to get this to scale correctly? I just want it to appear the same no matter what device, so ok for it to shrink as long as it still fills the header.