Streaming live at 10am (PST)

Object Fit Support question

Hi

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 for any help. Share link below.

Graham


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Perhaps you are not setting your image to 100% of its parent height and width? Can’t see any objectfitted images in your read-only anyway.

Hi @dram,

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…

https://share.getcloudapp.com/d5ue6o2o

Many thanks,

Graham

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.

Ok, thanks @dram for your help and advice on this, I’ll leave as is.

Kind regards,

graham-cox-60x65-circle.png

Graham Cox

Managing Director

Acquire.agency - Google Partner Agency

Specialist Paid Customer Acquisition For Financial Services

logo128x23.png

Office: +44 (0)117 440 6422

Mob: +44 (0)7725 355665

Messenger: https://m.me/acquireagency

No problem Graham.

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! :smiley: