Background

JSX style props for styling background colors, gradients, and images.

Background Attachment

Use bgAttachment to control the attachment of a background image.

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

Prop	CSS Property	Token Category
`bgAttachment`, `backgroundAttachment`	`background-attachment`	-

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(...)" />

Prop	CSS Property	Token Category
`bgClip`, `backgroundClip`	`background-clip`	-

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" />

Prop	CSS Property	Token Category
`bg`, `background`	`background`	`colors`
`bgColor`, `backgroundColor`	`background-color`	`colors`

Background Origin

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

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

Prop	CSS Property	Token Category
`bgOrigin`, `backgroundOrigin`	`background-origin`	-

Background Position

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

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

Prop	CSS Property	Token Category
`bgPosition`, `backgroundPosition`	`background-image`	-
`bgPositionX`, `backgroundPositionX`	`background-image`	-
`bgPositionY`, `backgroundPositionY`	`background-image`	-

Background Repeat

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

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

Prop	CSS Property	Token Category
`bgRepeat`, `backgroundRepeat`	`background-repeat`	-

Background Size

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

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

Prop	CSS Property	Token Category
`bgSize`, `backgroundSize`	`background-size`	-

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})" />

Prop	CSS Property	Token Category
`bgImage`, `backgroundImage`	`background-image`	`assets`, `gradients`

Background Gradient

Properties to create a background gradient based on color stops.

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

Prop	CSS Property	Token Category
`bgGradient`	`background-image`	`gradients`
`textGradient`	`background-image`	`gradients`
`gradientFrom`	`--gradient-from`	`colors`
`gradientTo`	`--gradient-to`	`colors`
`gradientVia`	`--gradient-via`	`colors`

On this page

Edit this page on Github