How do I style circles behind another element?

I am trying to figure out the best way to place these green circles behind another element that allows for the design to stay responsive.
Demo Here

absolute
background-color
border
design
margin
orm
pseudo-element
responsive
transform
translate
z-index

>Solution :

Something like this:

.background {
 background-color: black;
 height: 200px;
 width: 500px;
 margin: 30px;
 position: relative;
}

.background::before { 
 content: '';
 position: absolute;
 height: 50px;
 width: 50px;
 background-color: red;
 border-radius: 50%;
 top: 0;
 left: 0;
 display: block;
 transform: translate(-50%, -50%);
 z-index: -2;
}

.background::after { 
 content: '';
 position: absolute;
 height: 50px;
 width: 50px;
 background-color: red;
 border-radius: 50%;
 bottom: -47px;
 right: -47px;
 display: block;
 transform: translate(-50%, -50%);
 z-index: -2;
}