How to Add Background Image in Webflow

How to Add Background Image in Webflow

You spend hours picking the right image. You open Webflow. And then — nothing. No obvious button. No drag-and-drop. Just a blank Style panel staring back at you.

Here’s the thing: adding a background image in Webflow is not hard. But it is different from every other tool you’ve used before. Once you understand where Webflow hides this setting and why, you’ll be adding and customizing background images in under two minutes.

This guide covers everything — from the basics to advanced tips like fixed parallax, responsive sizing, and overlay effects. Let’s go.

Why Background Images Matter More Than You Think

Background images are not decoration. They are conversion tools.

Research consistently shows that 75% of users judge a website’s credibility based on visual design alone. A well-placed background image communicates trust, professionalism, and brand personality before a visitor reads a single word.

And the numbers back this up further:

• Pages with strong visual hierarchy — which background images contribute to — can see up to 80% higher engagement than plain text pages.
• 38% of users will stop engaging with a website if the layout or content is unattractive (Adobe).
• Sites that use full-width background images on landing pages have been shown to improve conversion rates by 20–30% compared to image-free equivalents.

If your Webflow site isn’t using background images strategically, you’re leaving performance on the table.

What You Need Before You Start

Before opening Webflow Designer, make sure you have:

• A high-resolution image (at least 1920px wide for hero sections)
• The image in JPG or WebP format (WebP is preferred for speed — it’s typically 25–34% smaller than JPG at equivalent quality)
• A clear idea of which element you want to apply the background to — a section, a div block, or the full body

File size matters more than most people realize. Images over 1MB are one of the top causes of slow page load, and slow pages lose visitors fast — a 1-second delay in page load time can reduce conversions by 7% (Akamai).

Optimize your image before uploading. Tools like Squoosh or TinyPNG can cut file sizes by 60–70% with no visible quality loss.

How to Add a Background Image in Webflow — Step by Step

Select the Element

Click on the element you want to style — a Section, Div Block, Container, or even the Body itself. You’ll see it highlighted with a blue border in the Designer.

For full-page hero backgrounds, click the Section element. For card-style backgrounds, click the relevant Div Block.

Open the Style Panel

With your element selected, look to the right side of the Designer. Click the Style Panel (it looks like a paint palette icon).

Scroll down to the Backgrounds section. It’s typically about halfway down the panel, sitting beneath Spacing and above Border settings.

Add the Background Image

Click the “+” icon next to the Backgrounds section. A dropdown will appear with multiple background types. Select Image.

A new background layer appears. Click on the image thumbnail (it will show a checkerboard pattern, indicating no image is set yet). This opens the Asset Manager.

Upload or Select Your Image

In the Asset Manager, either:

• Click “Upload” to add a new image from your computer
• Or select an image you’ve already uploaded to the project

Once selected, the image will immediately apply to your chosen element.

How to Customize the Background Image

Getting the image onto the element is step one. Getting it to look right is where most people hit walls. Here’s how to control every aspect.

Set the Background Size

With the background image layer selected in the Style Panel, you’ll see a Size dropdown. Your main options:

Cover — The image scales to completely fill the element, cropping if needed. This is the most common choice for hero sections and full-width areas. Cover is the right default 90% of the time.

Contain — The entire image fits inside the element without cropping, which often leaves empty space on the sides. Use this for logos or icons as backgrounds.

Custom (%) — You manually set width and height. Useful for precise control, but requires more work to keep things responsive.

Set the Background Position

The Position controls tell Webflow where to anchor the image within the element.

Center Center is the standard starting point. But if your image has an important subject — a face, a logo, a product — you’ll want to position it deliberately.

For hero sections: Center Center or Center Top work well in most cases.

You can also enter custom X and Y percentage values for pixel-perfect control.

Set Background Repeat

By default, Webflow will tile (repeat) background images if they’re smaller than the element. For full-width photos, set Repeat to No Repeat.

For pattern textures or subtle tiles, experiment with Repeat Both, Repeat X, or Repeat Y.

Add a Color Overlay

This is one of the most underused tricks in Webflow. A semi-transparent color overlay layered on top of a background image does three things at once:

• Increases text readability dramatically
• Creates brand cohesion through color tinting
• Makes your design feel intentional rather than accidental

To add an overlay: in the Backgrounds panel, click “+” again and add a Color layer. Place it above the image layer in the stack. Set it to a dark color (try #000000) and adjust opacity to 30–50%.

Studies show that text on images with overlays has 60% better readability than text directly on photos.

How to Add a Fixed (Parallax) Background Image

A fixed background creates a parallax scrolling effect — the background stays in place while the rest of the page scrolls over it. It looks elegant with minimal effort.

In the Background settings, find the Attachment dropdown and switch it from Scroll to Fixed.

That’s it. Scroll through your page in the Designer to preview it.

One important caveat: Fixed backgrounds do not work on iOS (Safari ignores the CSS property that powers this effect). If mobile traffic is significant for your site — and on average, mobile now accounts for over 60% of all web traffic — test carefully before using fixed backgrounds on critical sections.

How to Make Background Images Responsive

This is where a lot of Webflow beginners lose time. A background image that looks perfect on desktop can look terrible on mobile if you don’t address responsiveness explicitly.

Webflow’s responsive breakpoints are your best friends here. Here’s the workflow:

Switch to Mobile Breakpoint

Click the device icons at the top of the Designer to switch to Tablet, Mobile Landscape, or Mobile Portrait views.

Adjust Position and Size Per Breakpoint

On mobile, you may need to:

• Change Background Position to focus on the key part of the image (if your hero image has a face on the right, switch to Right Center on mobile so it isn’t cropped out)
• Change Background Size to Cover if it isn’t already
• Adjust the element’s height in pixels or vh units to give the background enough space to show

Use Different Images for Different Breakpoints

For large hero backgrounds, consider using a tighter-cropped, portrait-oriented version of your image specifically for mobile. This dramatically improves both visual quality and page speed on mobile devices.

In Webflow, just switch to the mobile breakpoint and upload a different image in the Backgrounds panel. It only applies at that breakpoint.

This is one of the biggest impacts you can make on mobile performance — pages optimized for mobile see 15% higher conversion rates on average than unoptimized counterparts.

How to Add a Background Image to the Full Page (Body)

Want a background image to span the entire page, not just a section?

Click on the Body element in the Navigator panel (or click somewhere outside all sections in the Designer). Open the Style Panel, go to Backgrounds, and add your image exactly as described above.

Set size to Cover and position to Center Center.

For most sites, however, it’s better practice to apply backgrounds to individual Sections rather than the Body. This gives you more layout control and avoids conflicts between sections.

Common Mistakes to Avoid

Using images that are too large. Images over 2MB noticeably slow your site. 47% of users expect a web page to load in 2 seconds or less — if your hero image tanks load time, visitors are gone before they’ve read anything.

Forgetting to set No Repeat. A high-res photo that tiles is an instant sign of a beginner build. Always check Repeat settings.

Ignoring mobile. What looks cinematic on desktop can be a blurry cropped mess on mobile. Test every breakpoint before publishing.

Not adding an overlay when using text over images. If you have any text on top of a background image without an overlay, you’re making your content significantly harder to read and reducing the credibility you’re trying to build.

Using JPG when WebP is available. WebP delivers the same visual quality at roughly 30% smaller file size, which directly improves your Core Web Vitals scores. Google uses Core Web Vitals as a ranking signal — page experience signals influence rankings for over 200 million URLs according to Google’s own data.

Pro Tips for Better Background Image Results

Use focal point thinking. Before uploading, mentally mark the most important part of your image. Make sure your Position settings keep that focal point visible across all breakpoints.

Test with real content. Always add your actual copy over the background image before finalizing. The combination changes everything — a beautiful background can become unreadable once text lands on it.

Keep a consistent visual language. If you’re using warm-toned images in one section, avoid cool-toned images in the next. Visual consistency across sections builds trust and professionalism. Consistent brand presentation across all platforms can increase revenue by up to 23% (Forbes).

Use video backgrounds sparingly. Webflow supports video backgrounds too, but they can be 10–50x heavier than images. Reserve them for moments where motion genuinely adds value.