Profile Card HTML & CSS

Community feedback

• 

  Rice Penguin•30

  @RicePenguin

  Posted over 4 years ago

  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/

  00
• 

  Artur•145

  @arturpawlowski5

  Posted over 4 years ago

  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.

  00