Skip to content
Visuals and effects

background-image

Places an image or gradient behind an element. Multiple comma-separated layers are allowed, and the first layer is painted on top.

411 effects in the catalog use this property.

Syntax

background-image: <image> [, <image>]*;

Watch out

Layer order is easy to misread: the first image in a comma-separated list is painted on top and the final image sits at the bottom.

Common values

linear-gradient(...)
Gradients are treated as images
url('desen.svg')
External file
none
Removes the image layer

Effects using background-image

These are working effects from the catalog. Open a tile to inspect the full source.