Background styles - Webflow help
An overview of the background styles you can set on an element: color, images, gradients, color overlays, and videos.
Background color
You can set a background color on any element except for images and videos (although you can use images and videos as backgrounds). Add a background color by entering a color value (e.g., hex, rgba, or color name) or by using the color picker. You can also add background color to text elements or specific text content inside a text element.
If you want background colors to be consistent throughout your site, use the Body (All pages) tag for inheritance. Style it by selecting the Body element and choosing the tag in the Style panel or using the inheritance menu. Any changes to the Body (All pages) will default to new elements.
Most elements have a transparent background by default. Some elements, like the Slider component, have a default color you can override.
Background image
Webflow offers many options to customize your background image.
To add or change the background image:
- Scroll to Backgrounds in the Style panel
- Click Choose image from the Asset panel
- Check the box for @2x for sharper images on HiDPI devices
To set a background video, use the background video component in the Add panel.
Background image size
- Custom: Set width/height or percentage values. Scale larger with values above 100%.
- Cover: Fills and covers the background, possibly trimming the image.
- Contain: Keeps the image contained inside the element.
Background image position
Default is top-left. You can manually adjust positions (px, %, VW, VH).
Tile
Background images repeat both vertically and horizontally by default. Control to repeat horizontally, vertically, or not at all.
Fixed or scroll
Choose Not fixed (image scrolls) or Fixed (image stays in place). Fixed images are contained by viewport.
Gradients
Gradients can be used alone or layered on background color/image. Two types:
- Linear gradients
- Radial gradients
Both have stops (points) where colors fade.
Linear gradient
Set direction by angle via dial, arrows (45-degree increments), or field entry.
Gradient stops
Edit color/opacity at stops. Layering over image makes image visible at lower opacity. Add stops by clicking. Remove by dragging out.
Repeat
Toggles for repeating the gradient.
Reverse
Icon to reverse stop positions.
Radial gradient
Creates circular gradient. Left stop is color at center.
Position
Choose focal point via dots or manually with values/units.
Size
Preset controls:
- Closest side: center to closest side
- Closest corner: center to closest corner
- Farthest side: center to farthest side
- Farthest corner: (default)
Color overlay
Add color overlay to backgrounds with color picker and opacity.
Layering images and gradients
Stack multiple background images, gradients, and overlays for effect. Reorder with drag, toggle visibility with eye icon, delete with trash.
Background video
Background videos are silent, looping videos for backgrounds to add cinematic flair. Be aware:
Add with Quick find (CMD/CTRL+E) or Add panel > Components. Upload your video (max 30MB; webm, mp4, mov, ogg). Filenames should avoid spaces/special characters.
Transcoding happens after upload (mp4 & webm for browser support).
Video settings
- Loop video: repeats continuously.
- Autoplay video: starts on page load.
- Include play/pause button: visitor can control playback.
Previewing the Background video
- Hover thumbnail
- Open in new tab
- Preview icon in bar
Replacing the background video
Open settings to replace video, transcode, preview, etc.
Using the background video as a section
Drop content inside the Background video element. Style as usual in Style panel.
Background video overlay
Add a gradient or solid overlay for contrast. Overlay sits atop the video, beneath content.
And that’s using backgrounds in Webflow!