BackgroundImage
Renders a div (or any element) with a CSS background-image set from the src prop. Supports optional corner radius and overlay children for captions or gradients.
Basic
<BackgroundImage
src="https://example.com/photo.jpg"
style="height:180px;width:100%"
/>With radius
<BackgroundImage
src="https://example.com/photo.jpg"
radius="md"
style="height:180px;width:100%"
/>With overlay children
Caption over image
<BackgroundImage
src="https://example.com/photo.jpg"
radius="md"
style="height:180px;display:flex;align-items:flex-end;padding:var(--dv-spacing-md)"
>
<Text c="white" fw={700} size="lg">Caption over image</Text>
</BackgroundImage>Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | URL of the background image (required) |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Corner radius token or CSS value |
component | string | 'div' | HTML element to render as the root node |
class | string | — | Additional CSS class names |
style | object | — | Inline styles merged with generated styles |
children | ReactNode | — | Content overlaid on the background image |