Background Props
Background props control various background-related CSS properties.
Available Props
| Prop | CSS Property | Theme Key |
|---|---|---|
| background | background | none |
| backgroundImage | background-image | none |
| backgroundSize | background-size | none |
| backgroundPosition | background-position | none |
| backgroundRepeat | background-repeat | none |
| backgroundAttachment | background-attachment | none |
| bgImage | background-image | none |
| bgSize | background-size | none |
| bgPosition | background-position | none |
| bgRepeat | background-repeat | none |
| bgAttachment | background-attachment | none |
Usage
<Box
backgroundImage="url('/images/bg.png')"
backgroundSize="cover"
backgroundPosition="center"
backgroundRepeat="no-repeat"
/>
// Or using shorthand props
<Box
bgImage="url('/images/bg.png')"
bgSize="cover"
bgPosition="center"
/>