Background designs

To change the position of the background image manually, you can input a value for the horizontal position (left) and the vertical position (top). You have the option to adjust the unit of the values between px, % (default), VW, and VH.

Tile

By default, a background image is replicated both vertically and horizontally.

You can opt to repeat the background either horizontally, vertically, or not at all.

Fixed or scroll

In the Background settings, you can select the background image’s behavior on scrolling:

1. Not fixed: the image scrolls with the page
2. Fixed: the image remains in place while scrolling

All background images default to being Not fixed. Choosing Fixed ensures the image width is constrained by the viewport rather than the element bounds.

Gradients

Gradients can be applied independently or overlaid on an existing background color or image.

There are two types of gradients:

1. Linear gradients
2. Radial gradients

Both gradient varieties feature stops (or points) along the gradient where colors transition from one to another.

Note: Safari interprets and interpolates gradients with transparency as “transparent black”. Hence, the transparent color may appear black for Safari users.

Linear gradient

A linear gradient generates a colored gradient in one direction, controlled by the angle. You can modify the gradient angle by:

1. Clicking and dragging the dot on the direction dial, or clicking anywhere on the dial to set the angle position
2. Clicking the arrows to rotate the angle in 45-degree increments
3. Entering the desired angle in the input field

Gradient stops

By using gradient stops, you can adjust the color and opacity of the gradient by selecting stops on the gradient bar. If there’s an underlying background image layer, it becomes visible when the opacity is reduced.

To introduce more colors to the gradient, add a stop to the gradient bar. You can include multiple stops by clicking anywhere on the gradient bar.

You can adjust the stop positions by dragging along the gradient bar.

To remove a stop:

1. Long tap on the stop
2. Drag the stop out of the gradient bar until the edges of the stop become transparent
3. Release to delete the stop

Repeat

Enabling Repeat repeats the position and angle of the existing gradient.

This is determined by the positions of the first and last stops. To create a more distinct repeating gradient, move the first or last stop away from the edge of the gradient bar.

Reverse

The reverse icon flips the positions of the stops.

Concentric gradient

Concentric gradients form a gradient in a circular pattern.

The color breakpoint on the left represents the color displayed at the core of the concentric gradient.

Alignment

You can set the central point of the gradient by selecting one of the points in the alignment controller. For instance, you may press the central dot to align your image content.

You may also manually modify the alignment by entering values for the horizontal position (left) and the vertical position (top). You can also alter the unit of the values between the px, % (default), vw, and vh.

Dimension

The behavior of the gradient concerning the element’s border is governed by the preset dimensions. The presets include:

• Proximate side: the gradient initiates from the core point towards the closest side
• Proximate corner: the gradient commences from the core point to the closest corner
• Farthest side: the gradient begins from the core point and extends until it reaches the farthest side
• Farthest corner: the default setting. The gradient starts from the core point and extends until it reaches the farthest corner

Color tint

You can append a color tint to any of your backgrounds. Employ the color selector to designate a color, then define an opacity level.

Layering pictures and gradients

Incorporate and pile multiple background images, gradients, and color tints to craft stratified effects. To rearrange background layers, hover over the layer and tap the dotted vertical line on the left.

Tap the eye symbol to switch the visibility of the layers. To remove any layer, click the trash can “delete” icon.

Backdrop video

Backdrop videos are noiseless, looping videos that function as the backdrop of a specific content segment. These can aid in engaging website visitors and capturing attention, or adding a cinematic touch to your website.

Nevertheless, it is crucial to acknowledge that autoplaying and looping backdrop videos can be disturbing and possibly disabling for individuals with cognitive impairments, vestibular ailments, or motion intolerance. If you opt for backdrop videos on your site, it is crucial to offer controls for your site visitors to pause automatically playing backdrop videos.

Essential information: Webflow incorporates an inherent play/pause button for backdrop videos by default to enhance accessibility and guarantee you can afford your site visitors the control they require to pause or play your backdrop video content. Additionally, backdrop videos will not auto-play for site visitors who have Desires reduced motion set in their system settings.

Integrate a Backdrop video using Quick find (CMD/CTRL+E) or from the Addpanel > Components section. You’ll be prompted to upload a video immediately after placing the Backdrop video on the canvas.

Then, add a video from your device.

Video configurations

The Background video module features three active settings by default: Loop video, Autoplay video, and Include play/pause button. You have the option to deactivate each of these settings by toggling the checkboxes. 

Loop video 

Upon activation, the Loop video feature causes your background video to continuously repeat. 

Vital: WCAG Success Criterion 2.2.2: Pause, Stop, Hide specifies that if any automatically moving, blinking, or scrolling content lasts for over five seconds, users must be provided controls to pause, stop, or hide the motion. If you’ve enabled the Loop video feature, also ensure the Include play/pause button is active, giving an accessible experience to your visitors. 

Autoplay video 

Once enabled, the Autoplay video feature initiates your background video once the page loads.

Vital: WCAG Success Criterion 2.2.2: Pause, Stop, Hide emphasizes the need for controls if any automatically moving, blinking, or scrolling content lasts for more than five seconds. Therefore, if you’ve enabled the Autoplay video setting, make sure Include play/pause button is also enabled to offer an accessible experience. 

Include play/pause button

Enabling the Include play/pause button feature adds an in-built play/pause button on your background video for visitors to use in starting or stopping the video. Your background video will pause automatically if a visitor has the Prefers reduced motion option enabled on their OS, regardless of the Include play/pause button status.

Important: If you disable Include play/pause button, visitors with Prefers reduced motion on their OS won’t be able to play the background video. 

Useful tip: Videos on autoplay with no clear pause option contribute to high site abandonment rates. Providing visible video controls can reduce your site’s bounce rate. 

You can also personalize the design of the play/pause button to suit your preferences. Refer to our tutorial on managing play/pause controls for background videos for more details.

Supported video file formats

The Background video unit accepts video files under 30MB in the following formats: webm, mp4, mov, ogg.

Reminder: Avoid using special characters (apart from dashes) or spaces in background video filenames, and optimize videos for the web to enhance performance.

Video transcoding

Upon uploading, the video file goes through transcoding to other formats (mp4 & webm) for broad browser compatibility. Utilize this time to continue designing in the Designer workspace.

Previewing the Background video

You can preview the video using any of the following methods:

1. Hover over the video thumbnail in the background video settings
2. Click the open in new tab icon next to the video file name for a new tab preview
3. Click the Preview icon in the top bar to visualize the background video layout

Replacing the background video

To swap the Background video, access the Background video settings by either double-clicking on the video or heading to the Settingspanel. 

You can also check theAdjustments for background video can be made by choosing the element and hitting Enter. Simply click on Replace Video in the settings window to upload and convert a new video.

Utilizing the background video for a segment

Utilize a Background video as a segment. Insert any content within the Background video element. Positioning and styling content within the segment is similar to other elements — all styling options are accessible in the Style panel.

Tip: Background videos may not start automatically on touch devices if a user has activated data-saving mode or low power mode.

Overlay for background video

You can enhance the presentation by adding a gradient or a solid color overlay to your Background video. Using the Color picker, select your preferred colors and adjust the opacity for better visibility. The overlay will be positioned above the Background video but below the content of the segment.

That’s how backgrounds work in Webflow!