Streaming live at 10am (PST)

Object-fit Hero Images

Hey ya’ll I’m trying to figure out how to utilize the new object-fit feature detailed here:

I want to make each of my hero images fit>cover in my hero sections so that my site may load a bit faster than what I currently am using: “background images”. So that my background images are behind my hero text (as exists on all other Product pages

I’ve input an image into the top section of my home-page and assigned it (the image) a ‘relative position’ with a z-index of 89 within the section, and I set the fit to ‘Cover’, and then I set the ‘Wrapper’ a relative position z-index of 90.

Thanks for your help!

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

Hi @TJwebflow,

Thanks for your post, i took a look and it seems the wrapper is showing above the hero image, are you still having trouble with that?

If the issue persists, can you help to take a screenshot of what is not rendering as expected?

Generally speaking if I am layering thing in the section, I would put the section to relative, then give the image an absolute position which is relative to the section with a lower z-index than the wrapper.

I hope this helps

Hey @cyberdave I want my image I want to serve as “background” in the same way that my other ‘product’ pages are showing currently.

I’ve now sleeved the homepage hero image into the wrapper and given it a z-index of 89, and I’ve given the ‘Row’ (containing text) a z-index of 90.

Please advise!

Hi @TJwebflow, thanks so much for your reply, I have made a quick video:

I hope that helps to show what I mean on the absolute positioning of the image

1 Like

Thank you so much @cyberdave!

Ah! One more follow-up question for you @cyberdave I’m showing a margin on the sides of the image instead of it expanding to full width of the section. Any idea why?