Background styles

Learn about the background styles that you can set on an element: background color, background image, background gradients, and background solid color overlays.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

In the backgrounds section of the Style panel, you can define the background of any element with the exception of media elements such as images and videos. In the background settings, you can add a background image, gradient, or color.

Background images

You can add a background image, gradient, or color overlay to an element in the backgrounds section of the Style panel.

Below, we’ll cover each of the following background options:

  1. Background image
  2. Linear gradient
  3. Radial gradient
  4. Color overlay

There are a number of options that you can set for the background image.

Access the background image settings in the Style panel. To add a new background image or change the current background, select an image from the Asset panel. Enabling @2x will set the width of the background image to be half of its original image size so that it renders sharply on HiDPI devices.

To add a background video, use the background video component in the Add panel.

Background image size

You can specify the size of the background image by setting custom dimensions or using one of the presets:

  • Custom: this will specify the width or height of the background image. You can also use percentage values here. To set the background image to scale larger than the element, use any percentage higher than 100%.
  • Cover: this will scale the image to fill and cover the whole background of the element leaving no blank spaces and overriding any set width and height. The image may be trimmed off depending on the aspect ratio of the element, the device screen size, and the image.
  • Contain: this setting will scale your background image to stay contained inside the element and never exceed the size of the element. This value also overrides any set width and height.
Webflow Background images - cover vs contain

Background image position

By default, a background image is placed at the top-left corner of an element. Adjusting the positioning of the background is useful to determine which part of the image is visible across different screen sizes.

You can justify the image vertically and horizontally.

To manually adjust the positioning of the background image, enter the desired position 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.

Tile

By default, a background image is repeated both vertically and horizontally. You can choose to repeat the background only horizontally, vertically, or to not repeat at all.

Fixed/Scroll

You can choose whether the background image will scroll with the page or remain fixed in place as you scroll by selecting “fixed” or “not fixed” in your background settings.

All background images are not fixed by default. Setting a background image to fixed will also force the background image width to be contained in the viewport instead of the element bounds.

Gradients

Gradients can be used on their own or on top of an existing background color or background image.

There are two types of gradients:

  1. Linear gradients
  2. Radial gradients

Both gradient types consist of stops, or points along the gradient from which colors fade from one to another.

Stops, colors, and opacity

You can edit the color and opacity of the gradient by selecting the gradient stops that appear on the gradient bar. If there is 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 them along the gradient bar. To delete a stop, long click and drag the stop out of the gradient bar until the edges of the stop become transparent, then let go and the stop should be removed.

Repeat

Toggling repeat will cause the position and angle of the existing gradient to repeat. This is controlled by the position of the first and last stops. Drag the first or last stop away from the edge of the gradient bar to create a more obvious repeating gradient.

Reverse

The reverse icon reverses the position of the stops.

Linear gradient

A linear gradient creates a gradient of color in one direction, directed by the angle. To adjust the angle of the gradient, you can:

  1. Click and drag the dot on the direction dial, clicking anywhere on the dial to set the angle position
  1. Click the arrows to rotate the angle in 45-degree increments
  1. Enter the desired angle in the input field

Radial gradient

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.

Position

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 the 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.

Size

How the gradient behaves with the element’s bounds is controlled by the size preset. The presets are:

  • Closest side: the gradient starts from the center point to the closes side
  • Closest corner: the gradient starts from the center point to the closest corner
  • Farthest side: the gradient starts from the center point and continues until it reaches the farthest side
  • Farthest corner: the default preset. The gradient starts from the center point and continues until it reaches the farthest corner

Color overlay

You can also add a color overlay to any of your backgrounds. Use the color picker to choose a color and set an opacity value.

Layering images and gradients

Add and stack multiple background images, gradients, and color overlays as layers to create layered effects. To reorder background layers, hover over the layer and click the dotted vertical line the appears on the left.

Click on the eye icon to toggle the visibility of the layers. To delete any layer, click the trashcan icon.

Background color

You can set a background color on any element except for images and videos. If you set a background color on any parent element, such as the body element, most child elements will inherit the same background color.

By default, most have a transparent background. Some elements, such as the slider component, have a default background color that you can override by setting a background color on the main slider element.

You can apply a background color on anu 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.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.