Set Image Background & Color

This article will show you how to customize background colors, images, and even videos to suit your design needs.

Background & Color Settings

Background settings are an essential design tool that allows you to control the look and feel of your website. They allow you to define the visual tone of your pages by applying various styles, such as solid colors, gradients, images, or videos.

By setting a solid background color, a gradient, or an image, you can create visually appealing layouts that enhance your branding and engage visitors.

Set Background Color

You can easily apply a solid color or gradient to the background of your page or a specific section.

Set a Background Color

Step 1: Select the Element:

Click on the section, row, or column where you want to apply a background color. Open the Settings in the left sidebar.

Step 2: Find Background Settings:

In the settings panel, locate the Background section.

Select Color and choose Solid Color as the background type.

Step 3: Choose a Color:

Click the color picker to select a color manually. Alternatively, enter a specific hex code (e.g., #ff5733).

Set a Background Gradient

Step 1: Select the Element

Step 2: Enable Gradient Background:

Under the Background Settings, choose Color and select Gradient as the background type.

Step 3: Customize the Gradient:

Choose Colors: Select two or more colors for the gradient.
Set Gradient Direction: Adjust the angle of the gradient (e.g., vertical, diagonal, or radial).
Fine-Tune Opacity: Adjust the transparency levels of the gradient colors, if needed.

Set Background Image

Adding a background image can enhance your page’s visual appeal by incorporating textures, patterns, or themed visuals.

Step 1: Select the Element

Step 2: Enable Image Background:

In the Background Settings, choose Image as the background type.

choose-image-background

Click Upload to add a new image from your device.

Step 3: Adjust Image Settings:

Position: Choose the alignment of the image, such as center, top-left, or top-right, to control how the image is displayed within the background area.
Scale: Adjust the image size to fit your layout.
Repeat: Decide whether the image should tile across the background or remain as a single instance.
Attachment: Set the background image to either scroll with the page or remain fixed in place for a parallax effect.

Combine Background Color & Background Image

You can enhance the overall aesthetic of your design by combining a background color with an image.

The background color will appear beneath the image, which is effective when using an image with a transparent background.

Step 1: Add Image Background

In the Background section, select the Image option.

Upload or select an image that has a transparent background.

Step 2: Add Color Background

Still, in the Background section, click on the Color option. Choose a color you want to display behind the image.

add-color-background

By pairing a suitable background color with the image, you can create a harmonious and visually appealing design that enhances the overall tone of your page.

Set Background Video

Video backgrounds are an excellent way to create dynamic, engaging visuals for your website.

Step 1: Insert a Hero Banner element or a Video Banner element.

Step 2: Choose Video under Banner Souce section:

Step 3: Add Video Source:

Upload your video to your website’s file manager or use an external source (e.g., YouTube, Vimeo). Read our instructions here: Set Video Background.
Copy the video URL and paste it into the designated field in the settings.

Step 4: Customize Video Settings:

Size: Adjust the size of the video to fit the desired section or area.
Shape: Modify the shape of the video background by applying rounded corners, borders, or other styling effects to align with your design.
Overlay: Add a color overlay with adjustable transparency to enhance text readability or match your branding theme.
Zoom on Hover: Enable a zoom effect to create an interactive and engaging experience when users hover over the video.

add-video-and-edit

By using these steps, you can customize the background of your pages with colors, gradients, images, or videos, creating an engaging and visually consistent design that aligns with your branding goals.