How to make background images responsive in Webflow?

Background images that look great on desktop often fail on smaller screens — they get cropped awkwardly, lose focus, or display the wrong part of the image. Webflow gives you per-breakpoint control over background image settings so you can adjust positioning, size, and even swap images for different devices.

Setting a background image

1. Select the element (typically a Section or Div Block).
2. Open the Style panel.
3. Scroll to the Background section.
4. Click the image icon to add a background image — choose from Assets or upload a new file.

Adjusting background size

The Background Size dropdown controls how the image fills the element:

• Cover — Scales the image to cover the entire element, cropping edges if necessary. Best for most cases.

• Contain — Scales the image to fit entirely within the element, which may leave empty space.

• Auto — Displays the image at its original size, which can cause overflow or gaps.

For responsive layouts, Cover is almost always the right choice.

Per-breakpoint adjustments

Webflow lets you change background settings at each breakpoint independently.

1. Switch to a smaller breakpoint using the toolbar at the top (Tablet, Mobile Landscape, Mobile Portrait).
2. With the element selected, modify the background settings in the Style panel.
3. Changes cascade downward — a change made at Tablet also applies to Mobile Landscape and Mobile Portrait unless overridden again.

You can adjust background position per breakpoint to control which part of the image is visible. For example, on desktop you might center the image, but on mobile shift it to show the subject that was previously cropped out.

Swapping images per breakpoint

If no amount of repositioning makes the desktop image work on mobile, you can use a different image entirely.

Method: Two image elements with visibility toggling

1. Add two Div Blocks or Sections stacked in the same position.
2. Set the desktop-optimized image as the background on one, and the mobile-optimized image on the other.
3. Use Display settings per breakpoint to show/hide each version:

• Desktop version: visible on Desktop and Tablet, hidden on Mobile.

• Mobile version: hidden on Desktop and Tablet, visible on Mobile.

This gives you full control over which image appears at each screen size.

Background position tips

The Background Position setting lets you anchor the image to specific edges or the center:

• Center Center — Default. Good for symmetric images.

• Center Top — Keeps the top of the image visible, useful when the subject is in the upper portion.

• Center Bottom — Anchors to the bottom.

Adjust position per breakpoint to keep the important part of the image in view as the container changes shape.

Performance considerations

Responsive background images still load the full source file regardless of screen size. To avoid serving a large hero image to mobile devices:

• Use the visibility toggle method described above with separate optimized images.

• Keep background images compressed (see: how to compress images for Webflow).

• Avoid using multiple large background images on a single page.