Design and Styling

Background

21min



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. 

Document image


Background color 

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

Document image


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.

Document image


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.



Gradient

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

To add a gradient:

  • click on “+” to the Solid, Image, Gradient list:
Document image

  • click on the color:
Document image

  • select a tab with the desired gradient type:
Document image


There are two types of gradients:

  • Linear 
  • Radial 

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

Linear

Linear gradient creates a gradient in one direction. 

Document image


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

Document image


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

Document image


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. 

Document image

Document image

Document image


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

Radial gradients have circle shapes.

Document image


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

Document image


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. 

Document image


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 an Image as a background:

  • click on  “+” next to the Solid, Image, Gradient list:
Document image

  • click on the color:
Document image

  • select the Image tab, click the Choose Image button, and then select one of the already uploaded images or upload a new one:
Document image


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.

Document image

Document image


Contain

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

Document image


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. 

Document image


Fill

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

Document image


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.

Document image


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. 

Document image


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

Document image