Streaming live at 10am (PST)

[TUTORIAL] How to use object-fit for responsive background images, significantly improving mobile speed

It’s quite simple. background-image is a very poor choice for images if you serve mobile users. Background images are NOT responsive: that means, if you upload a 1.5 MB image file for your 4K desktop users and set it as a background-image, users at 1280x720 on mobile will be forced to download that enormous file for no reason.

That will significantly slow down your page for mobile users.

Webflow does offer responsive images when you use the image element. But, how do you achieve a background with that? Isn’t that just a normal image now? With the latest additions of object-position and object-fit by Webflow, now it’s incredibly simple. Add your image to the div you’d like (instead of setting the image as that div’s background image) and then set your image to these settings.

height: 100%
width: 100%
object-fit: cover
position: absolute
z-index: -1 (this is optional!)

Just like background-image, you get:

  • full coverage, no matter the resolution or aspect ratio or device
  • no distorted or stretched images
  • no need to give custom dimensions on each viewport
  • no image jumping as desktop users resize the page
  • you can control the % left, % right, % top, and % bottom
  • with a negative z-index (and/or position:absolute), you can add hero text right on top of the image

Most importantly, you get THESE benefits that you lose if you use background-images

  • fully responsive: your images will match the user’s resolution

A 40-second overview showing the settings AND the final result:

2 Likes