How to set a background image in an Grid element imported from @aws-amplify/ui-react

Question

I see the grid element has a property "backgroundImage", but haven't managed to get it to work. Here is what I have tried (typescript):

    return (
    <>
      <Grid
        templateColumns="500px 500px"
        templateRows="500px 500px"
        backgroundImage="./background.png"
      >
        <Card columnStart="1" columnEnd="-1">
          "Hello, world!"
        </Card>
        <View backgroundColor={"blue"}></View>
      </Grid>
    </>
  );

Is there something wrong with my approach?

I am using "@aws-amplify/ui-react": "^4.6.0".

Answer 1

backgroundImage should be written inside url, backgroundImage="url(/background.png)"

You can try this:

return (
  <>
    <Grid
      templateColumns="500px 500px"
      templateRows="500px 500px"
      backgroundImage="url(./background.png)"
    >
      <Card columnStart="1" columnEnd="-1">
        "Hello, world!"
      </Card>
      <View backgroundColor={"blue"}></View>
    </Grid>
  </>
);