BackgroundImagepolymorphic

Displays image as background

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Use BackgroundImage component when you need to display the image behind 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

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