Chakra-UI

I♥️Components

Background

|

Chakra Docs

|

⦾ Using background images in Chakra UI can be accomplished by applying CSS properties directly on Chakra UI components. Here's how you can set background images on Chakra UI components:
Content goes here

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:

Some description

To import the Box component:

Examples

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

Chakra UI allows you to add a fallback background color for your background images. This is helpful to maintain the aesthetic of your design in case the image fails to load. In the following example, if the image fails to load, the Box component will display a fallback background color (in this case, teal.500).

Code

Creative Idea No. 2

Chakra UI provides a bgRepeat property which allows you to control if and how a background image is repeated. You can specifyno-repeat, repeat, repeat-x, repeat-y,or round as values. In this example, the image is used as a background image for the Box component and is set not to repeat.

Code

Creative Idea No. 3

You can also use gradients as background images in Chakra UI. Using the linearGradient or radialGradient utilities, you can create smooth transitions between multiple colors.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.