You can add styles to an image placed on a page.

※ Only Blend mode, Filter, and Backdrop filter are available for Image mode.

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.

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.

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