An overview of the background styles you can set on an element: color, background, gradients, and color overlays.
*CONTENT WARNING at 01:23 — this section may affect people with visual sensitivities. Viewer discretion is advised.
Setting the background on an element gives you control over appearance and legibility. In the Backgrounds section of the Style panel, you can add a background image, gradient, or color to most elements (except media elements like video and image).
In this lesson:
You can set a background color on any element except for images and videos. You can apply a background color on any element by entering a web color (hex, rgba, or color name) or by choosing a color using the color picker. A background color can also be added to text elements or specific text content inside of a text element.
There are times you want background colors to be consistent throughout your project. This is where the Body (All pages) tag comes in handy.
You can style the Body (All pages) tag in 2 ways:
Once you set the background on the Body (All pages), any element you add will default to this background style. And you can make changes not just to background color, but any style property. Learn more about styling tag elements in HTML tags.
By default, most elements have a transparent background. Some elements, like the slider component, have a default background color you can override by setting a background color on the main slider element.
Webflow offers many options to customize your background image.
To add or change the background image:
To use a background video instead, replace the element with a background video component in the Add panel.
To specify the size of the background image, use custom dimensions or one of the presets:
By default, a background image is placed at the top-left corner of an element. Change the position of the background to adjust how the image looks across screen sizes.
You can align the image vertically and horizontally.
To manually adjust the position of the background image, you can enter a position value for the horizontal position (left) and the vertical position (top). You can also change the unit of the values between the px, % (default), VW, and VH.
By default, a background image is repeated both vertically and horizontally.
You can choose to repeat the background horizontally, vertically, or not at all.
You can choose the behavior of the background image on scroll in the Background settings:
All background images are Not fixed by default. Setting a background image to Fixed forces the image width to be contained by the viewport instead of by the element bounds.
Gradients can be used on their own or on top of an existing background color or image.
There are 2 types of gradients:
Both gradient types have stops (or points) along the gradient where colors fade from one to another.
Note: Safari interprets (and interpolates) gradients to a transparency as “transparent black”. Therefore, the transparent color will look black for Safari users.
A linear gradient creates a gradient of color in one direction, directed by the angle. To adjust the angle of the gradient, you can:
With gradient stops, you can edit the color and opacity of the gradient by choosing the gradient stops from the gradient bar. If there’s a background image layer underneath the gradient, it will become visible once the opacity is lowered.
To add additional colors to the gradient, add a stop to the gradient bar. You can add more than one stop by clicking anywhere on the gradient bar.
You can adjust the stop positions by clicking and dragging along the gradient bar.
To delete a stop:
Toggling Repeat will cause the position and angle of the existing gradient to repeat.
This is set by the position of the first and last stops. To create a more obvious repeating gradient, drag the first or last stop away from the edge of the gradient bar.
The reverse icon reverses the position of the stops.
Radial gradients create a gradient in the shape of a circle.
The color stop on the left will be the color you see in the center of the radial gradient.
You can choose the focal point of the gradient, by clicking one of the dots in the position control. For example, click the center dot to justify your image content.
You can also manually adjust the positioning by typing values for the horizontal position (left) and the vertical position (top). You can also change the unit of the values between the px, % (default), vw, and vh.
How the gradient works with the element’s boundary is controlled by the size preset. The presets are:
You can add a color overlay to any of your backgrounds. Use the color picker to choose a color, then set an opacity value.
Layering images and gradients
Add and stack multiple background images, gradients, and color overlays to create layered effects. To reorder background layers, hover over the layer and click the dotted vertical line on the left.
Click the eye icon to toggle the visibility of the layers. To delete any layer, click the trash icon.
A Background video is a great way to grab attention using an audio-less, looping video as the background of a particular section of content. In fact, a Background video behaves almost like a section, so you can put content right inside.
Add a Background video using Quick find (CMD/CTRL+E) or from the Elements panel components. As you drop the Background video on your canvas, you'll be prompted to upload a video.
Next, upload a video from your computer.
The Background video component accepts video files smaller than 30MB with the following formats: webm, mp4, mov, ogg.
Note: Background video filenames should not include spaces or special characters (except dashes) and videos should be optimized for the web for best performance.
After the video file is uploaded, it is transcoded to other video file types (mp4 & webm) for maximum browser support. While this is happening, you can keep working in the Designer.
There are 3 ways to preview the video you just uploaded:
To replace the Background video, open the Background video settings by either double-clicking on the video or by going to the Settings panel.
You can also access the Background video settings by selecting the element and pressing Enter. Once the settings window is open, click Replace Video to upload and transcode a new video.
You can use a Background video as a section. Just drop any content inside the Background video element. Positioning and styling content inside the section is the same as other elements — all style properties are available in the Style panel.
Note: Background videos may not autoplay on touch devices if a site visitor has enabled data saver.
You can add some contrast using a gradient or a solid color overlay on your Background video. With the Color picker - choose your colors and change the opacity to adjust the visibility. The overlay will sit on top of the Background video but beneath the section’s content.
And that’s using backgrounds in Webflow!
Something went wrong while submitting the form. Please contact email@example.com