Note: Box mode and Img mode for image boxes
Image boxes have two modes — "Box mode" and "Img mode" — and the way images are handled and which features are available will differ depending on the mode.
For more details, see Image box: Box mode and Img mode.
Applying background styling to an image
Background styling can only be applied to images in Box mode. Be sure to switch the target image to Box mode in advance.
Tip: Applying filters to images in Img mode
You can apply filters to images in Img mode using the box's filter settings.
For details on how to set this up, see Box appearance: Setting filters.
Select the target box.
Select the [Image] tab in the right panel.
If the panel is closed, open the right panel.
Configure the following settings at the bottom of the Image tab.
Background position (background-position)
Repeat (background-repeat)
Background size (background-size)
Filter
Adjusting the position of a background image
You can adjust the image's anchor position using the [Background position] field.
The default is center, but you can change it from the image box's "Position" to center, top, bottom, left, right, or any of the four corners.
Repeating a background image
When you check the [Repeat] field, the image will be tiled and repeated. The image will repeat across any empty space.
Adjusting size (background-size)
Use this when specifying the size of a background image or when you want to display only a portion of it. There are four methods:
1. cover
Scales the background image to the smallest size that completely covers the background area. If you set the box width to 100%, the image will fill the full width of the screen.
2. contain
Scales the image to the largest size that fits within the background area.
3. px (pixels)
Lets you specify the width while keeping the image's aspect ratio. If the image is larger than the parent box, the portion that overflows will be cropped.
4. % (percentage)
Specifies the image width as a percentage of the background area. This is useful for responsive design.
Applying filters to a background image
You can apply the following filters to images:
Brightness
Contrast
Saturation
Grayscale
Sepia
Blur
For details on each visual effect, see Box appearance: Setting filters > Filters.
image picture filter
image photo asset