BackgroundImage

Usage

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

function Demo() {
  return (
    <Box maw={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 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> {}

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