BackgroundImagepolymorphic

Displays image as background
Import

Usage

Use BackgroundImage component when you need to display the image below any content. Component sets background-image to given src, background-size to cover and background-position to center. It can be used for cards, hero headers and similar components:

BackgroundImage component can be used to add any content on image. It is useful for hero headers and other similar sections
Radius
xs
sm
md
lg
xl
import { BackgroundImage, Center, Text, Box } from '@mantine/core';
function Demo() {
return (
<Box sx={{ maxWidth: 300 }} mx="auto">
<BackgroundImage
src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
radius="sm"
>
<Center p="md">
<Text color="#fff">
BackgroundImage component can be used to add any content on image. It is useful for hero
headers and other similar sections
</Text>
</Center>
</BackgroundImage>
</Box>
);
}

Custom root element

BackgroundImage is a polymorphic component, you can change root element by setting component prop:

import { BackgroundImage } from '@mantine/core';
function Demo() {
return (
<BackgroundImage
component="a"
href="https://mantine.dev"
target="_blank"
src="https://mantine.dev/image.png"
/>
);
}

Accessibility

BackgroundImage component sets background-image, it is ignored by screen readers, if this is not a desired behavior, use Image component instead.

Download more icon variants from https://tabler-icons.io/i/search

BackgroundImage component props

NameTypeDescription
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or number to set border-radius in px
src *
string
Image url