Background
Background color
The background color can be set from the editor page> Appearance> Background> Add background color.
You can pick a color from color-picker, or by typing color value in HEX or RGBA format inside color-picker.
Background image
The background image can be set from the editor page> Appearance> Background> Add background image.
Image
You can insert an image by referring to the file from "Select an existing image".
Size
You can adjust the size of the background image according to the size.
Custom : You can set the height and width of the background image.
Cover : Enlarges or reduces the image while maintaining the aspect ratio according to the parent element. If the aspect ratio does not match the parent element, the background image will be cropped.
Includes : The background image is scaled within the range of the parent element while maintaining the aspect ratio.
Position
You can set the layout of the background image vertically and horizontally.
Linear gradient background
The linear gradient background can be set from the editor page> Appearance> Background> Add Linear Gradient Background.
Number of colors in a linear gradient
The number of colors of the linear gradation is specified by two by default, and the color connecting the boundary line is expressed as a gradation.
You can add up to 3 colors, and when you want to delete it, you can delete it by dragging and dropping the pin mark of the linear gradation to the color palette below. You can set a total of 5 linear gradation colors.
Number of lines in a linear gradient
The number of linear gradation lines is specified by default to two, and the color connecting the lines is expressed as a gradation.
You can add up to 3 lines, and when you want to delete it, you can delete it by dragging and dropping the pin mark of the linear gradation to the color palette below. A total of 5 linear gradations can be set.
Size
You can adjust the size of the linear gradation according to the size.
Custom : You can set the height and width of the linear gradation.
Cover : Scales the linear gradient to fit the parent element while preserving the aspect ratio. If the aspect ratio does not match the parent element, the linear gradient will be cropped.
Includes : Scales the linear gradient within the parent element while preserving the aspect ratio.
Position
You can set the arrangement of the linear gradation on the top, bottom, left, and right.
Circular gradient background
The background of the circular gradient can be set from the editor page> Appearance> Background> Add circular gradient background.
Number of circular gradient colors
The number of colors of the circular gradation is specified by two by default, and the color connecting the boundary lines is expressed as a gradation.
You can add up to 3 colors, and when you want to delete it, you can delete it by dragging and dropping the pin mark of the circular gradation to the color palette below. You can set a total of 5 circular gradation colors.
Radial gradient
You can set the arrangement and range of the circular gradation.
Left : Arrangement of circular gradation from the left
Top : Arrangement of circular gradation from above
Width : Width of circular gradient
Height : Height of circular gradation
Size
You can adjust the size of the circular gradation according to the size.
Custom : You can set the height and width of the circular gradation.
Cover : Scales the circular gradient while preserving the aspect ratio to match the parent element. If the aspect ratio does not match the parent element, the circular gradient will be cropped.
Includes : Enlarges / reduces the circular gradient within the range of the parent element while preserving the aspect ratio.
Position
You can set the arrangement of the linear gradation on the top, bottom, left, and right.
Repeat background
To repeat the background, you can add background color> add background image> add linear gradient background> add circular gradient background> repeat.
Repeat
No-repeat : Do not repeat the image
Repeat : Repeat in all directions
Repeat-x: Repeat only horizontally.
Repeat-y: Repeat only vertically.
Clipping
Clipping : Sets which part of the element is visible.
In the border : The background image is visible only in the border.
In content : The background image is visible only in the content.
In padding : The background image is visible only in the padding.
Clip to text: The background image is visible only in the text.
Scroll
Scroll with page: Scrolls with the page.
Pinned to page: Pins the background regardless of page scrolling.
Scroll with content: Scrolls with content.
Last updated