Profile Card Component

Hi! I spent many hours in this background too. My strategy to solve this was adding the two images in a <img> tag and then I positioned them using the "position: relative" and the basic properties for top and left.

HTML
<img class="bg-top" src="./src/images/bg-pattern-top.svg" alt="Bubble background">
<img class="bg-bottom" src="./src/images/bg-pattern-top.svg" alt="Bubble background">

CSS
.bg-top {
    position: relative;
    max-width: 800px;
    height: auto;
    left: -490px;
    top: 311px;
  }

.bg-bottom {
    position: relative;
    max-width: 800px;
    height: auto;
    top: -177px;
    right: -418px;
  }

Probably not the best solution as possible, but it worked for me! 😀

The background was kind of tricky. It's two images, set both to no-repeat. There's one that is offset from top left and one that is offset from bottom right. You can take the dimensions of the images to compute the offsets. The MDN docs on background https://developer.mozilla.org/en-US/docs/Web/CSS/background I find helpful. Also here is a link to my solution if you want to look at my css for the bg. https://github.com/zoedarkweather/profile-card-component. Hope this helps. :-)