CSS, how to place images inside images and place them at the right place?

Here is what I am trying to do, I wanna place 8 of those images equally distanced. All of those images are in state, I am using react to change them.

I managed to place the background Image, the 8 images in the right equidistant spot but after that it got really confusing.

I don't know if I should use a div with background image and 3 items inside.

Some tutorials I found seems to not work with react.

Here is how i managed to make 8 spaces. Now i need to place the background and 3 images inside them.

flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: space-between;

<div className="height60">
                    <div className="background1">1</div>
                    <div className="background2">1</div>
                    <div className="background1">1</div>
                    <div className="background2">1</div>
                    <div className="background1">1</div>
                    <div className="background2">1</div>
                    <div className="background1">1</div>
                    <div className="background2">1</div>
              </div>

My last attempt