background-size
Controls the rendered size of a background image or gradient inside its element.
623 effects in the catalog use this property.
Syntax
background-size: <width> <height> | cover | contain;Watch out
Sliding gradients rely on this property: set `background-size: 200% 100%`, then animate `background-position` to move the oversized gradient through the element.
Common values
cover- Fills the area completely and crops any overflow
contain- Fits the whole image and may leave empty space
200% 100%- Percentage scaling, often used for animated gradients
Effects using background-size
These are working effects from the catalog. Open a tile to inspect the full source.