Oops! Something went wrong while submitting the form
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.
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.
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.
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.
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.
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.
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:
Click and drag the dot on the direction dial, clicking anywhere on the dial to set the angle position
Click the arrows to rotate the angle in 45-degree increments
Enter the desired angle in the input field
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:
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
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.
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.