Profile Card Component using HTML+CSS.

I have learned through the MDN Web Docs (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#css_background_images) that you should use CSS for decorative images and HTML for images that have meaning within the webpage. However, positioning the decorative background circles so that it supports all resolutions without using the HTML image element was difficult (and still not correctly implemented). This is what I had the main issue with and spent the majority of the time on. I would like to learn how to position the background circles so that they are pinned to the top left and the bottom right and approach the top center and the bottom center as the screen shrinks for a more responsive design.