Responsive Grid and Flexbox Profile card

Hello Guys

My only challenge in this project was placing the bg-pattern-bottom and bg-pattern-top in the top left corner and bottom right corner of the body background respectively.

I tried using background-position: left top, right bottom I also tried using the transform: translate option but it never seemed to get it in the exact position as the project.

The first option was using background-image and trying to position it.

 background-image: url(images/bg-pattern-top.svg),
    url(images/bg-pattern-bottom.svg);
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
background-position: left top,  right bottom; 
}

The second thing i tried was using the img to place the images in the body and using transform to try and position them.

 .bg-top {
  transform: translate(-60%, -60%);
}

.bg-bottom {
  transform: translate(60%, 60%);
} 

Any help toward solving this would be greatly appreciated.