You can add styles to an image placed on a page.
How to Add Style
Select an image and enable Box mode
Open Image Tab in a Style Bar
You can choose various styles
Type of Styles
Brightness
Contrast
Vivid
Monochrome
Sepia
Blur
※ Only Blend mode, Filter, and Backdrop filter are available for Image mode.
Size Adjustment (background-size)
This function is mainly used to specify the size of the background image or crop the image. Four types of adjustments are available.
1. Cover
Cover the background by the max-width of the image while maintaining the aspect ratio. Configuring the box size with 100% width and Cover mode, result to place the image with the full width.
2. Contain
Contain maintains the aspect ratio of the image and scales the image to the maximum size to fit in the background area.
3. px (pixel)
The px allows you to specify the width of the image while maintaining the aspect ratio.
The parent box matches the size of the Box and the image in the child box can be specified. The image will be cropped if the image is larger than the box size.
4. %（percentage）
The percentage allows you to designate the image width by percentage.
This configuration type is convenient for responsiveness as the aspect ratio of the image will follow the width of the device.
Repeated Background Image
This Background image repeats layouts repeated images as a background. By selecting "Repeat" in the image box, the repeated image fills the image box. The repeat mode is enabled by default.
Adjusting The position of The Background Image
This function configures the origin of the image position. By selecting Position in the image box, you can also choose the origin either center, upper, bottom, left, right, and all four corners. The image is placed in the center by default.
image picture filter