Background

Background is used for the visual design of a website. Background can be applied to almost all elements, except for the Image element (because it overlaps the background). You can set a color, gradient, or image as a background and also overlay several background layers.

You can set the Background properties on the Style tab in the right panel in the Appearance section - Fill and Background color .

Background color

This setting defines the base background color of the element. It is the lowest background layer — all other background styles added in the Fill setting will be layered on top of it.

To set the background color, click the "+" icon to the right of it.

You can set a background color by entering its value (in Hex or RGB format) or by selecting a color with the color picker.

You can save colors to use them in the project later. To do this, click on “+” in Saved colors .

You can also select a color from the most recently used color by clicking the drop-down list and selecting Last used colors .

You can also set the background opacity from 0 to 100%. By default, most elements have a transparent background (0%). Some elements have a default background color that you can override.

You can remove the added background by clicking the “–” icon to the right of it.

Fill

This setting allows you to apply background styles to an element. You can add one or more background layers. For each layer, you can choose:

solid color fill

linear gradient

radial gradient

background image

Solid Color Fill

This setting allows you to set the background fill color.

Linear gradient

Gradients can be used independently or over an existing background or image color.

Linear gradient creates a gradient in one direction.

Gradient angle

You can set a gradient angle with one of two methods:

by dragging a point on the Angle dial.

by entering the desired angle in the input field.

Gradient points

With gradient points (stops) you can edit the color and opacity of the gradient.

To change the color, select the desired point on the gradient bar and set the desired color for it below (by entering its value or using the color picker).

To add additional colors to the gradient, you need to add a point to the gradient bar. To do this, click on the gradient bar in the required place. You can add multiple points.

You can adjust the position of the gradient point by dragging it along the gradient bar. To remove the gradient point, right-click on it.

Repeat gradient

Enabling Repeat will cause the gradient to repeat. You can set this by using the position of the first and last points. To create a repeating gradient, drag the first and/or last point away from the edge of the gradient bar.

Reverse gradient

The reverse gradient button reverses the position of the gradient points.

Radial gradient

Radial gradients have circle shapes.

The color point on the left will be the color that appears at the center of the radial gradient.

Position of the center of the radial gradient

You can select a focal point of the gradient by clicking on one of the points in its position control.

You can also enable or disable the Scale and Repeat options for a gradient and control its appearance with Kind and Size properties.

Image

To add a background image, click the Select image button, then choose one of the already uploaded images or upload a new one:

After selecting the image, it will appear in the preview window.

Image options

You can specify position and size options for the Image. You can also make the image repeat horizontally and/or vertically.

Background image size

Original

By default, the added image has a 100% size, i.e. it matches the size of the original. You can set the desired image size in percentage in the Size option using the slider. The maximum image size is 200%.

If the element on which the image is superimposed has a different size, then the image will be cropped or not completely cover the element.

Contain

Scales the background image proportionally so that it is fully displayed inside the element.

Cover

Scales the background image proportionally to fill and cover the entire element. The image may be cropped depending on the dimensions of the element.

Fill

Scales the image to fit the size of the element without cropping. The image may be distorted.

Fit width (W)

Scales the image to fit its width.

Fit height (H)

Scales the image to fit its height.

Image position

By default, an Image is placed in the top left corner of an element. You can change the position of the image to customize its appearance. You can align the Image vertically and horizontally.

To manually adjust the position of an Image, you can enter a horizontal position value (X) and a vertical position value (Y) in pixels, or move the image in the preview window by holding it with the left mouse button.

Tile (repeating image)

By default, an Image does not repeat. You can choose to repeat the Image:

vertically and horizontally

only horizontally

only vertically

Fix or scroll

The behavior of an Image when scrolling can be selected in the Image settings:

Do not fix - an image is scrolled along with the page.

Fix - the image stays in place while scrolling.

All background images are not fixed by default. Fixing an Image causes its width to be limited by the size of the browser window, not the border of an element.

Overlaying background layers

You can add a color overlay to any background. To do this, add a new background layer, select its color, and then set the opacity value.

You can also overlay images and gradients . Add multiple background images, gradients, and color overlays to create layered effects.

To reorder background layers, drag the icon on the left. You can also make a layer visible, by clicking on the “eye” icon on the right, and delete a layer by clicking on "-".

Background clip

The setting defines how the background color or background image will be clipped relative to the element.

To add an option: Design tab → Appearance section → click “+” next to the Background Clip setting. By default, the value will be set to Clip background to padding .

You can choose from the following options:

• Clip background to padding – The background occupies the content area and padding, but does not extend under the borders. This is visible when there are transparent or dashed borders.

• Clip background to content – The background fills only the content area, but does not appear in the padding or border areas.

• Clip background to text – The background is displayed only inside the text. This works only if the text is transparent.

Background Clip can be used, for example, to apply a gradient color to text.

To achieve this, set the following properties:

Text opacity (for the Text block): 0%

Background (for the Div block): Gradient

Background clipping (for the Div block): Clip background to text

If the text block is inside a Div block with a gradient background, make sure to set the Position of the text block to Static for the effect to work correctly.

Difference between “Background color” and “Fill” Settings

The Background color and Fill – Color Fill settings are both used to define an element’s background color, but there are key differences between them:

Background color sets the color of the bottom background layer. Any background styles added in the Fill setting will be layered on top of it.

When you use Fill – Color Fill with less than 100% opacity, it acts as a semi-transparent overlay over the background layers below it. For example, it can be used to apply a transparent color overlay on top of a background image.

The Fill setting does not support transitions (such as smooth color changes on hover). So if you need to change the background color when a user hovers over an element or switches to another state, you should use the Background color setting for that.