An overview of the background styles you can set on an element: color, background, gradients, and color overlays.
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 ackground settings, you can add a background image, gradient, or color.
In this lesson:
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:
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.
You can specify the size of the background image by setting custom dimensions or using one of the presets:
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.
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.
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 can be used on their own or on top of an existing background color or background image.
There are two types of gradients:
Both gradient types consist of stops, or points along the gradient from which colors fade from one to another.
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.
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.
The reverse icon reverses the position of the stops.
A linear gradient creates a gradient of color in one direction, directed by the angle. To adjust the angle of the gradient, you can:
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 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.
How the gradient behaves with the element’s bounds is controlled by the size preset. The presets are:
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.
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.
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.
Something went wrong while submitting the form. Please contact firstname.lastname@example.org