BackgroundImage

Displays image as background.

Import

import { BackgroundImage } from '@tidbcloud/uikit'

Usage

import { BackgroundImage, Center, Text, Box } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Box maw={300} mx="auto">
      <BackgroundImage src="https://example.com/image.png" radius="md">
        <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:

import { BackgroundImage } from '@tidbcloud/uikit'
 
function Demo() {
  return <BackgroundImage component="button" src="image.png" />
}

Props

Prop	Type	Default	Description
children	`React.ReactNode`	-	Content to render on top of the background image
radius	`MantineRadius`	-	Border radius
src	`string`	required	Image URL

Avatar Badge