Background

Background Attachment

Use bgAttachment to control the attachment of a background image.

<Box bgAttachment="fixed" bgImage="url(...)" />

Background Blend Mode

Use bgBlendMode prop to control how an element's background image should blend with the its background color.

<Box bgBlendMode="multiply" bgColor="red.200" bgImage="url(...)" />

Background Clip

Use bgClip to control the clipping of a background image.

<Box bgClip="border-box" bgImage="url(...)" />

Background Color

Use bg, bgColor, or backgroundColor props to set the background color of an element.

<Box bg="red.200" />
<Box bgColor="red.200" />
 
// with opacity modifier
<Box bg="blue.200/30" />
<Box bgColor="blue.200/30" />

Background Origin

Use bgOrigin or backgroundOrigin to control the origin of a background image.

<Box bgOrigin="border-box" bgImage="url(...)" />

Background Position

Properties for controlling the src and position of a background image.

<Box bgImage="url(...)" bgPosition="center" />

Background Repeat

Use bgRepeat or backgroundRepeat to control the repeat of a background image.

<Box bgRepeat="no-repeat" bgImage="url(...)" />

Background Size

Use bgSize or backgroundSize to control the size of a background image.

<Box bgSize="cover" bgImage="url(...)" />

Background Image

Use bgImage or backgroundImage to set the background image of an element.

<Box bgImage="url(...)" />
<Box bgImage="radial-gradient(circle, #0000 45%, #000f 48%)" />
<Box bgImage="linear-gradient(black, white)" />
 
// with token reference
<Box bgImage="linear-gradient({colors.red.200}, {colors.blue.200})" />

Background Gradient

Properties to create a background gradient based on color stops.

<Box bgGradient="to-r" gradientFrom="red.200" gradientTo="blue.200" />