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 Background section. 

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.

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

To add a gradient:

There are two types of gradients:

Both have stops (points) along the gradient with color transitions. 

Linear gradient creates a gradient in one direction. 

Gradient angle

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

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 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.

To add an Image as a background:

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

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:



Fix or scroll 

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

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. 

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 "-".