Profile Card HTML & CSS

Hi, This was the first challenge I did. I tried to create the background using the background-image property for the body but I just couldn't position them how I wanted. What worked for me was including the circles as elements and using absolute position. .circle-1 { position: absolute; right: 55%; bottom: 50%; } https://ricepenguin.github.io/Challenge1profilecardcomponent/

Hi,

I'm starting too with Dev Web but I already made this Challenge so hope can help a little bit.

With your background image, you can try to add 2 URLs with IMG to your one DIV or another container you use. Try to look at this code:

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: left top, right bottom;
  background-repeat: no-repeat, repeat;
}

More here: w3schools

With this code, you will have the same time 2 IMGs in the Background.

I see in your HTML that you used that but try to add too the position. Now it is:

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

Hope this helps.