Front Page header image cutting of the heads in my image

Hi,

I am having a problem where no matter how I size my image it always cuts off the heads in the image.

Please let me know what size to make the image because the stated size does not work.

Hello there,

Thank you for reaching out to us here.

It happens because the background image property’s value is set to cover. Quoted from MDN article:

cover scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

You might want to change it to contain. If so, please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.


.header-image{
  background-size: contain !important;
}

Regards,
Kharis