Profile Card - HTML & CSS

I've tried doing that using the images as background-image, but It was too hard for me to get the desired design, so I found that it's better to put the images on the HTML and use them inside a div with position: absolute, and then set a parent div with position: relative

my solution to the problem;

parent div { height: 100%; width: 100%; overflow: hidden; position: relative; }

.child-div(1) { position: absolute; top: -425px; left: -350px; }

.child-div(2) { position: absolute; bottom: -550px; right: -300px; }

Hope my explanation helps you! feel free to ask for help anytime :)

Note: Your bg images must be nested in a div each i.e bg - img 1 is in a div and bg - img 2 in another div and these two divs will be nested in a parent div before you set the CSS properties.

Hey Jesus, You can try the position:absolute (+ z-index) for each circle and then a combination of height/witdth and margins. There must be a lot of other possibilities but it worked for me :-)