In this example, I've used the Box component to create a div that has a background image.
bgImage: sets the URL of the background image.
bgPosition: defines the initial positioning of the background image.
bgRepeat: sets whether/how the image should repeat.
bgSize: sets the size of the image, in this case, "cover" ensures the background image covers the entire width and height of the box.
height: sets a specific height for the box.
It's also possible to use local images stored in your project. The way to do it depends on your project setup, but if you're using a typical React setup with Webpack, you can import the image into your component file and use it like so:
To import the Box component:
Box with Background Image:
Same values with Chakra shorthand:
Let's try some different values to see their effects:
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3