Center image in header with max-height and object-fit:cover set


I want to add a header image to my site with a max-height of 400px. The photo has a standard format of 16:9 or 4:3. Right now the image is positioned in the header container to the top:

I want the image to be centered as shown in the header image on this page: The CSS Way: 3 Tricks to Resolve Image Stretching Issues in your Website | Masoom's Dev Blog

I want the CSS property object-fit to be set to cover. I read somewhere that the image height and width need to be set to 100% but that does not solve the issue. Here are some images from my current settings:

Settings for image container that holds the image:
Screenshot 2022-09-07 at 22.14.43

Settings for the image itself:
Screenshot 2022-09-07 at 22.14.58

How the header looks like in the backend:

Here is my site Read-Only link.

I would appreciate very much some tip to get it solved :wink:

Thanks so much,


Anyone has an idea how this could be solved?