Background Position

Use bg-{position} utilities to control where a background image is placed within its box. Combine with bg-[size:_] or bg-cover / bg-contain to control sizing.

Style('bg-[url(/img/mountains.jpg)] bg-top-left')
Style('bg-[url(/img/mountains.jpg)] bg-top')
Style('bg-[url(/img/mountains.jpg)] bg-top-right')
Style('bg-[url(/img/mountains.jpg)] bg-left')
Style('bg-[url(/img/mountains.jpg)] bg-center')
Style('bg-[url(/img/mountains.jpg)] bg-right')
Style('bg-[url(/img/mountains.jpg)] bg-bottom-left')
Style('bg-[url(/img/mountains.jpg)] bg-bottom')
Style('bg-[url(/img/mountains.jpg)] bg-bottom-right')

Class reference

Class	Description
bg-top-left, bg-top, bg-top-right	Pin the image to the top edge.
bg-left, bg-center, bg-right	Pin the image to the vertical centre.
bg-bottom-left, bg-bottom, bg-bottom-right	Pin the image to the bottom edge.

bg-{position} is wired to DecorationImage.alignment when the box has a background image, and is a no-op otherwise (matching CSS, where background-position only affects an image layer). Pair with bg-[size:_] to render the image larger than its container so the alignment crop is visible.