Is it possible to use the new object fit property to display an image covering the entire hero section, instead of using the background-image property? I’m trying to do it with this boy wearing glasses image at help.amsmortgages.co.uk, but couldn’t get it covering the entire viewport.
Thanks. I removed it. I’ve just created a video showing what I’m doing, the issue now is I can’t get the copy to sit on top of the image like it does when the image is set as the background image property. Any ideas? See video below using the homepage…
Your image should have an absolute positioning for the rest of the content being on top of it. Also there could be issues with the content pushing image’s parent, making it higher.
To be honest in this example background image is a perfect solution for this layout. I suggest you don’t use object-fit in this instance.
Object fit is a great way to have your smaller thumbnails for products or posts to behave as bg images with added benefits of good seo and responsive images. But to make actual background images you’re better off with… background images!