Profile Card Component w/ FLEX

Hello Paula, congratulations on your solution!

I know that's tricky to resize and move the background image here and there if you're not familiar with the property that does this change, I knew it only because I saw it on w3schools.com. But there is 1 way to do that:

The best and easier way is using the code given below: body {

background: url(mountain.jpg);

background-repeat: no-repeat;

background-size: 300px 100px;

background-position: 500px 200px; }

And if you are not familiar with multiple background images then you can write the code given below:

body{

background-image: url(img_flwr.gif), url(paper.gif);

background-repeat: no-repeat, no-repeat;

background-size: 300px 100px, 200px 300px;

background-position: 500px 200px, 100px 250px; }

I hope its helpful :)

Hi Paula,

your logic regarding positioning patterns on X axis is okay, but not on Y axis.

For example you are positioning top left "bubble" with "top right" values but should do instead with "bottom right" so for instance instead using "background-position: top -70vh right 50vw, bottom -70vh left 50vw;" you can try with "background-position: bottom 50vh right 50vw, top 50vh left 50vw;". This is on line 95 in style.css.

Hope it helps ;)