BackgroundImage

Usage

import { BackgroundImage, Center, Text, Box } from '@mantine/core';

function Demo() {
  return (
    <Box maw={300} mx="auto">
      <BackgroundImage
        src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-6.png"
        radius="sm"
      >
        <Center p="md">
          <Text c="white">
            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>
  );
}

Polymorphic component

BackgroundImage is a polymorphic component – its default root element is div, but it can be changed to any other element or component with component prop:

import { BackgroundImage } from '@mantine/core';

function Demo() {
  return <BackgroundImage component="button" />;
}

Polymorphic components with TypeScript

Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, BackgroundImageProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example:

import type { BackgroundImageProps, ElementProps } from '@mantine/core';

interface MyBackgroundImageProps extends BackgroundImageProps,
  ElementProps<'button', keyof BackgroundImageProps> {}

Expand code

If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.