Background image doesn't appear inside circular progress bar

[donacrisante]

Hello everyone,
I have been trying since this morning to integrate an image as background in my circular progress bar, but without success. I have tried different ways. Either the picture doesn't appear, or the background is black, as it is now. Can someone maybe help me with this? The commented out lines are part of my attempts from this morning.

Many thanks in advance!

Here is my PR:
donacrisante/Capstone-project#17

[donacrisante]

I have also tried the method with CircularProgressBarWithChildren:

[...]
import { CircularProgressbarWithChildren } from "react-circular-progressbar";

[...]

[...]

But the homepage displays this:

The image is not found and I don't understand why.

[Kheirah]

Some things were right, some weren't. Let's start with the things that were right. The styled components for the background image can stay as it is:

const StyledBackground = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/SustainableCity.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
`; 

Actually that's about it. Now to the things that need adjusting. For implementing the ciruclar progress bar and the StyledBackground you write:

<StyledCircularProgressbar
    value={co2Emission}
    maxValue={2000}
    text={`${co2Emission.toFixed(2)} kg`}
/>
<StyledBackground />

Additionally, you need to move the "SustainableCity.jpg" to /public. Delete the .js file that you previously created for the image. Delete the import of that .js file.
When you do all that you will get this: