Hi, the image is not being ‘cropped’ as such, the left and right are still there, just hidden from view as the CSS setting is to cover the header area, so when you have a smaller screen it will fully cover the height of the header area also, without stretching the image.
You could try different CSS for the background size, such as:
.main-header{
background-size: 100% 100%;
}Using 100% will make the image width or height 100% of the header size.
The first value is the width and the second value is the height and you can use pixel values or % e.g. 600px 90%
If you want it to only apply to mobile devices, wrap the code like so:
@media screen and (max-width: 768px){
.main-header{
background-size: 100% 100%;
}
}This will only apply when the screen width is less than 768px for example.
Add custom CSS code in Appearance > Customize > Additional CSS