Skip to content
Visuals and effects

background-position

Sets the position of a background image inside its element.

521 effects in the catalog use this property.

Syntax

background-position: <horizontal> <vertical>;

Watch out

Percentages align matching points rather than acting as pixel offsets: `50%` aligns the image's midpoint with the element's midpoint.

Common values

center
Centers the background
0% 50%
Percentage-based position
left 20px top 10px
Position offset from named edges

Effects using background-position

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