How to add a background image with text to a Typescript web app using Chakra UI?

Below is my minimum reproducible example. I would like to add a background image to my entire screen below the navigation bar but it is currently not showing anything (just a white screen). The following code is taken from https://chakra-ui.com/docs/styled-system/style-props#background. Here is an image of what it currently looks like: https://i.stack.imgur.com/DoozV.jpg. Here is an image of my project structure: https://i.stack.imgur.com/5TBkH.png.

I also want to add some text in the middle of the background image. However, when I write <Text>This is my personal website.</Text> below <Box> in the Background component, I get an error of Expected ',', got 'is'.

Thank you very much!

import type { NextPage } from "next";
import Card from "../components/card";
import Background from "../components/background";
import NavBar from "../components/nav-bar";
import { Box } from "@chakra-ui/react";

const Home: NextPage = () => {
  return (
    <>
      <NavBar />
      <Background />
    </>
  );
};

export default Home;

import { Box, Image, Heading, Text, HStack, Spacer } from "@chakra-ui/react";
//import Link from "next/link";

const Background = () => {
  return (
    <Box
      backgroundImage="url('/public/background.png')"
      backgroundPosition="center"
      backgroundRepeat="no-repeat"
    />
  );
};

export default Background;