Object-fit Hero Images

Design help General
1

Hey ya’ll I’m trying to figure out how to utilize the new object-fit feature detailed here: https://webflow.com/feature/object-fit-support?utm_source=in-app-update&utm_medium=SYBG&utm_campaign=object-fit

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)

2

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

3

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!

4

Hi @TJwebflow, thanks so much for your reply, I have made a quick video: Screen Recording 2019-12-28...

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

1 Like
5

Thank you so much @cyberdave!

6

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?

7

Hi @cyberdave, I just started messing with object-fit images and I get the feeling that I can replicate the look and feels I was doing with the div background property. Having said, it seems like going forward, I should just be using object-fit for background images. (same design control + better SEO)

Is there any use case where a div background property is better? Just curious as this seems like it would change how I build sites from no one. Thanks!

8

Hi @MikeMiello, the object-fit is probably better for seo as the page speed will be better as the object-fit hero images will get the Responsive images applied, whereas the background images always show the original, non-compressed image.

I hope this helps

1 Like
9

Hi @TJwebflow, I know it has been awhile, are you still having any trouble with the image filling the section?

10

Hey @cyberdave thanks so much for following up! I thought I had it figured out, but now when my site is viewed on mobile with the testimonial quote images on each of my products pages (besides the home page) I’m getting an elongation thing happening, wherein what ought to be a perfect circle becomes a really tall oval. The kicker is it doesn’t show up this way on the webflow mobile preview mode, just on a device.

my site again: https://preview.webflow.com/preview/crewbooks?utm_medium=preview_link&utm_source=designer&utm_content=crewbooks&preview=93b72d5a97eb3a6912344cce7989a890&mode=preview

11

Thanks Dave for explaining!

12

Hey @cyberdave I’m still needing some help on this when you can spare the time!