Webflow Design Techniques

Use Background Images for a Consistent Fit

No items found.
Overview
Layout Techniques
Optimize Multi-line Text Layout Across Breakpoints
3:27
021
Image Optimization
Resizing Images for Webflow
3:44
041
Collection Lists
Nested Collection Lists Using a Multi-Ref
051
Nested Collection Lists
11:08
052
CMS Item-Specific Layouts in a CSS Grid
053
Working with Images
Use Background Images for a Consistent Fit
5:21
210
Clipping & Masking Techniques
211
No items found.

Most new Webflow designers will immediately drop an Image element everywhere they want a picture to appear. For some things, that's exactly the right approach. For other things, it creates challenges.

In hero areas;

  • It's difficult to scale that area between desktop and mobile devices.
  • It's difficult to overlay text and buttons on top of the image.
  • If you want consistency, all of your hero images everywhere on your site must be exactly the same aspect ration ( width / height ).

In CMS items, you have similar problems - plus;

  • If your customers will be adding new items, you have to give them the tools and education to size their images exactly right for your layout.

In many cases using a background image approach is a superior choice.

Caution!

Keep your images efficiently sized.

When you're using a background-image approach, Webflow cannot prepare a media srcset, and browsers cannot download a smaller version.

This means you don't want t be lazy with your asset preparation, or your mobile performance will suffer.

TIP: Use WEBP images whenever you can.

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.