You can use the Multi-Layer Background on Blocks, Boxes, Grid Cells, and Grid Repeater Items. This option allows you to add creative effects, including masking and shading.

You can change the Opacity of the Color Fill layer. This option will be supported for the Gradient layer in the future. However, you can already use the transparent Gradient Colors to overlay the Background Image with the Gradient.

multi-layer-background.jpg

Add Background Layer

Click the Plus Icon at the top of the Background section to add the Background Layer, which can be Color, Gradient, Image, or Video.

add-background-layer.png

Alternatively, you can add two Background Layers simultaneously by choosing the Image with Shade or Video with Shade option.

background-image-with-shade.png

Background Layer Opacity

You can change the Opacity of the Color Layer.

background-layer-opacity.png

And use the transparent Gradient Color to overlay the Image Background.

gradient-background-opacity.png

Reorder Background Layers

Click the Move icon to the left and drag the Layer up or down to change the Background Layer order.

reorder-background-layers.gif

Remove Background Layer

You can delete the Background Layer by clicking the Minus icon to the Layer's left in the Property Panel.

background-layer-delete.png

Parallax Effect

Use the Parallax Effect for the Image Backgrounds of the Box, Grid, and Grid Repeater.

parallax-image-bg.png

The effect works similarly to the Block, so you need to do a preview to see it.

box-parallax-image-bg.gif

You can use the Multi-Layer Background on Blocks, Boxes, Grid Cells, and Grid Repeater Items. This option allows you to add creative effects, including masking and shading. You can change the Opacity of the Color Fill layer. This option will be supported for the Gradient layer in the future. However, you can already use the transparent Gradient Colors to overlay the Background Image with the Gradient. !multi-layer-background.jpg! ### Add Background Layer Click the Plus Icon at the top of the Background section to add the Background Layer, which can be Color, Gradient, Image, or Video. !add-background-layer.png! Alternatively, you can add two Background Layers simultaneously by choosing the Image with Shade or Video with Shade option. !background-image-with-shade.png! ### Background Layer Opacity You can change the Opacity of the Color Layer. !background-layer-opacity.png! And use the transparent Gradient Color to overlay the Image Background. !gradient-background-opacity.png! ### Reorder Background Layers Click the Move icon to the left and drag the Layer up or down to change the Background Layer order. !reorder-background-layers.gif! ### Remove Background Layer You can delete the Background Layer by clicking the Minus icon to the Layer's left in the Property Panel. !background-layer-delete.png! ## Parallax Effect Use the Parallax Effect for the Image Backgrounds of the Box, Grid, and Grid Repeater. !parallax-image-bg.png! The effect works similarly to the Block, so you need to do a preview to see it. !box-parallax-image-bg.gif! ##