There is no limit to the number of backgrounds you can add to a component, making it easy to add overlay effects to images and videos.
Adding a background
Click the grey "+" to add a background or the red "x" to remove one.
Backgrounds are stacked in the order they were added, with the most recent on top.
You can change the position of a background by grabbing the left handle and dragging it up or down; release it at the desired position. Backgrounds can be stacked in any order.
Drag-and-drop backgrounds by the left handle to re-order them.
Types of backgrounds
There are four types of backgrounds — color, gradient, image, and video.
1. Adding Color Backgrounds
Color backgrounds apply a specified color to the current page's theme or the selected component. When you add a new color background it's set to the first color in your theme's palette.
Click the square color on the left to access its color, shade, and tint:
Here is how you can reduce a color background's opacity:
2. Adding Gradient Backgrounds
Each new gradient starts with two color stops. These color stops are visually represented by the two white handles — one on the left and one on the right. There is one handle for every color stop - like below:
Click the horizontal bar of a gradient background to give it an additional color stop. Remove a color stop by grabbing it's handle and dragging it down, away from the horizontal bar.
Click a color stop's handle to edit it. Dragging a color stop from left to right changes its position.
Here is how you click on a color stop's handle to edit it:
You can also choose a direction for your gradient. Use the circular widget to the left of the gradient's horizontal bar to change its direction. You can make the gradient a radial gradient by clicking on the circle on the inside of the circular widget.
3. Adding Image Backgrounds
The image you use for your background is selected from your Workspace's Files. Image backgrounds are highly configurable. You can replace any image, adjust its position, set it to repeat horizontally and vertically, adjust its size to have it occupy a given amount of space, add parallax effects, and make it see-through by adjusting its opacity.
Click on the image background to access the following:
- Replace the existing image with a new one by clicking the image thumbnail in the top left.
- Position it to the center, top, bottom, left, or right.
- Change its size to be the image's original size, or make sure the image covers the background with no white space showing, or ensure the entire image is shown (cover), but will be full width or height accordingly (contain).
- Repeat it vertically, horizontally, both, or neither.
- Apply a parallax effect by dragging the slider left or right.
- Adjust its opacity by dragging the slider left or right.
💡 You can create tile effects using repeat with smaller images (or icons).
Here is how you select an image to use as a background:
When choosing an image for your background, you can only use an image from your Workspace's Files. Upload any image, under 5MB, to set as your background.
4. Video Backgrounds
Add an autoplaying, looping YouTube video as a background by selecting "Video" in the dropdown.
Click the Background Video and Paste the URL of the YouTube video into the URL field.
You can adjust the parallax speed or opacity of the videos using the respective sliders.