How to set background image in React

#react #css

Having trouble setting a background image in your react project? I was looking at many posts on websites and I was finally able to solve this problem.

import candles from './Picture/candles.jpg';

<Box
    class="candles"
    style={{
    backgroundImage: `url(${candles})`,
}}>

I was trying this way for a while and it looked nothing wrong with it.

import candles from './Picture/candles.jpg';

<Box
    class="candles"
    style={{
    backgroundImage: `url(${candles})`,
    backgroundSize: "cover",
    height: "100vh",
    color: "#f5f5f5"
}}>

This worked and I found out that the image I was using was bigger than div default so it needed to be specified its height. So if you are struggling to set your background image in react, you can try this!

Hope this is helpful for you :)