Webflow Background Images: Fixed, Parallax, and CMS-Connected

Click the cloud icon in the left toolbar to open the Asset Manager. Click the upload cloud icon or drag and drop your image file. Webflow accepts JPG, PNG, WebP, and AVIF (supported since July 2024). The maximum file size per upload is 4MB, but for background images you should aim for under 500KB. If your image is larger, select it after upload, click Compress, and choose WebP (good compression) or AVIF (best compression, ~30-50% smaller than WebP). Background images do not automatically generate responsive srcset variants like inline images do, so a single optimized file is critical.

Select the element you want to give a background — usually a Section, Div Block, or Container. Open the Style Panel (S) and scroll to the Backgrounds section. Click the '+' icon to add a background layer. Choose 'Image' from the background type options. A file picker appears — click the folder icon or search your assets by name and select your uploaded image. The image immediately appears as a background on the element.

With the element selected and the background layer active in Style Panel → Backgrounds, find the Size dropdown. Change it from 'Auto' (default, which can cause tiling) to Cover. Cover scales the image to fill the entire element without distortion, cropping the overflow edges. Alternatively, set to Contain to show the full image without cropping — useful for logos or charts used as backgrounds. Below Size, set Position using the grid of 9 position presets (top-left, top-center, top-right, middle-left, center, etc.) or enter custom X/Y percentage values. Center (50% 50%) is the most common starting point.

Text on top of background images is often hard to read. Webflow supports multiple stacked background layers. With the element selected, click '+' in the Backgrounds section again to add a second layer. Choose 'Gradient' and select 'Linear'. Set the gradient from a semi-transparent dark color at the bottom (rgba(0,0,0,0.7)) to transparent at the top. Background layers stack in the order they appear — the top layer in the list renders on top visually. Drag the gradient layer above the image layer so the gradient sits over the image. The result is a dark fade at the bottom of your hero section that makes white text readable.

Parallax in Webflow is achieved by setting the background image attachment to Fixed. This makes the background image stay in place while the page scrolls, creating a depth illusion as the container moves over the static background. With the element selected, find the background image layer in Style Panel → Backgrounds. Look for the Tile/Attachment setting — it has options: No-repeat, Repeat, Repeat-x, Repeat-y. Click the attachment icon (scroll icon) to toggle between Scroll (default) and Fixed. Set it to Fixed. Make the section tall enough (min-height: 60-80vh) to see the parallax effect as the user scrolls.

To use different background images per CMS item (e.g., a blog post background, a portfolio project hero), use a CMS-connected background. First, ensure your Collection has an Image field (CMS Panel → your collection → Edit Fields → add Image field). Inside a Collection List item or Collection Template page, select the element that needs a background. Go to Style Panel → Backgrounds → '+' → Image. In the image source field, you will see a purple icon (the CMS binding icon). Click it and select your Image CMS field from the dropdown. Now each collection item renders its own background image dynamically.

If a CMS image field is empty, or if the background image fails to load, you need a fallback. In Style Panel → Backgrounds, add an additional background layer ('+' → Color) and place it below the image layer in the stack. Set a brand color or neutral dark color. This color shows through if the image fails. Next, switch through breakpoints in the Breakpoint Bar and check that the background image looks correct on Tablet and Mobile. You may need to adjust the Position value per breakpoint if the focal area of the image shifts.