How do I add a background image in Webflow?

Choose the image on the element

A background image is a style on an element, not a separate image element dropped on the canvas. Webflow lets you add a background image, a gradient, or a color to most elements. Image elements and video elements are the exception. You also cannot set a background color on those media elements, though an image or a video can itself be used as a background on something else.

Select the section or div that should hold the photo. Open the Style panel and scroll to Backgrounds. Click Choose image and pick the file from the Asset panel. Give the element a class, such as Hero, so the background lives on that class and not on every section.

Check @2x only when the file is built at double resolution. Webflow then sets the image width to half its original size so it renders sharply on HiDPI screens. Leave @2x off for a normal photo, or the picture will display smaller than you expect.

Example: the homepage hero is a section with a heading and a button inside it. Select the section, add the class Hero, and choose the office photo from the Asset panel. The heading stays a child of the section, on top of that photo. A silent looping clip is a Background video element, not this still image.

Set cover, contain, or a custom size

Size decides how the file meets the box. Cover scales the image until it fills the element, and it overrides any width and height you set on the image. The photo can be cropped. The crop depends on the shape of the element, the screen size, and the shape of the file. Contain scales the image so the whole file stays inside the element. It also overrides width and height. Empty bands can show if the photo and the section do not share an aspect ratio.

Custom size sets a width, a height, or both. Percentages are allowed. A percentage above 100 makes the image larger than the element.

For a hero photo, Cover is the usual choice, with the section given a height tall enough for the heading. Contain fits a logo or a diagram that must not be cropped. Custom size fits a small texture you want at a specific pixel size.

The setting is a style, so it cascades from the breakpoint where you set it. A Cover value on desktop applies on tablet and both phone widths until you override it on a smaller breakpoint. Switch to mobile portrait before you change the phone crop. Styles do not cascade upward to desktop.

Place it, then decide if it repeats or scrolls

The image starts at the top left of the element. Change the position when a face or a product is getting cut off. Align it vertically and horizontally, or type a left value and a top value. The units are px, % (the default), VW, and VH.

By default the image repeats both across and down. That is useful for a texture. It looks wrong on a photograph. Set the repeat to horizontal only, vertical only, or not at all. A hero photo should not repeat.

Scroll behavior has two choices. Not fixed is the default: the image scrolls with the page. Fixed keeps the image in place while the page scrolls. Fixed also forces the image width to follow the viewport instead of the element. Use Not fixed unless you specifically want the photo to stay put behind the content.

Example: on Hero, set Size to Cover, set the position to the center, and turn repeat off. Leave the scroll behavior on Not fixed. On mobile portrait, keep Cover, and move the position if the subject is cropped. The desktop position can stay centered.

Add an overlay when the text has to stay readable

A photo that is busy behind white type will fail. Backgrounds can stack. Add a color overlay, pick the color, and lower the opacity until the heading is easy to read and the photo is still visible. If a gradient or another image is already in the stack, the overlay sits with those layers.

Hover a layer and use the dotted vertical line on the left to reorder it. The eye icon hides a layer without deleting it. The trash icon removes it. Put the overlay above the photo and below the heading. The heading is an element inside the section, so it paints on top of the section background.

Example: add a black overlay on Hero at low opacity. The white heading and the button should remain readable on the office photo. If the overlay hides the photo, lower the opacity or check the eye icon on that layer. If the photo covers the heading, the heading is not inside the section. Move it into Hero in the Navigator.

Publish and check the crop

Publish the site and open the hero on the live domain. The photo should fill the section, sit in the position you chose, and appear once. Scroll the page. With Not fixed, the photo should move with the hero. Reload on a phone, or use the mobile portrait breakpoint and then a real phone. Cover will crop differently when the section is taller than it is wide.

If the photo tiles, repeat is still on. If it sits in a corner with empty space, Size is Contain or Custom, not Cover. If a second section shows the same photo, it uses the Hero class. Put the background on a class that only this section uses.

If the image stays locked while the rest of the page moves, Fixed is on, and its width is following the viewport. Switch that hero back to Not fixed and publish again. Check one inner page that should not have the photo, so a shared class did not pick up Hero's background.