Responsive mobile first solution for Profile Card Component challenge

Hi Ignacio. You're not alone on the background images. The key I think is to setting the size first then position.

So add both images as a background-image to your body. I recommend getting the background-size first using px units then to positioning. For the position % really makes it scale like crazy. Instead try first px, em or rem units.

For the desktop keep using your media query to adjust size and then position.

more info here on multiple background images

body {
  background-image: url(./images/bg-pattern-top.svg), 
                    url(./images/bg-pattern-bottom.svg);
  background-repeat: no-repeat;

  // Numbers are random but should be a good template
  background-size: 500px, 500px;                      
  background-position: top -200px left -100px, 
                       bottom -100px right -100px;
}

Overall your profile design looks great.

Keep on coding!! 👍👍

Hey, Ignacio Kornzaft! 👋

Nice work on this challenge! 👍

Just an additional tiny tip about positioning the background SVGs if you're interested—you can actually use vw and vh units in the background-position property to keep the SVGs in their place so that they do not move around when the page is resized. 😉

Keep coding (and happy coding, too)! 😁