My Profile Card Component Solution

Community feedback

• 

  JrMnicolas•10

  @JrMnicolasPosted over 3 years ago

  Hi Alexandria,

  Good Work! Try using background-image and background-position next time.

  here's some code to help with that

  background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: bottom -55% right 49vw, top -90% left 42vw;

  This should do the trick.

  Overall good work !

  0
• 

  Nebiyou Ersabo•185

  @NebiyouErsaboPosted over 3 years ago

  Hey there, For the background svgs the code below will do just fine.

  • background-image: url(images/bg-pattern-top.svg),url(images/bg-pattern-bottom.svg);
  • background-repeat: no-repeat;
  • background-position: right 48vw bottom 40vh, left 42vw top 50vh;

  Try it out and lmk 👍

  0
• 

  Anurag Singh•1,265

  @exist08Posted over 3 years ago

  Just use the ::before and ::after and position them.

  0

  ---

  

  alexandria•35

  @ironheart93Posted over 3 years ago

  @exist08 Will look into it, thank you!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Alexandria! My name is Vanza!

  👍 Nice work on completing this challenge! I agree with you that, the positioning of this background is hard and also tricky. When I did this challenge, I went to GitHub and searched for the right background-position, then copy and paste it😌.

  I see your CSS on background-position that you commented out, my question is why are you doing that? I think that's a good way to position it.

  That's it! Happy coding!

  0

  ---

  

  alexandria•35

  @ironheart93Posted over 3 years ago

  @vanzasetia Oh hi, thank you. I commented it out because it was someone else's solution I saw on Github.

  I wanted to understand it before implementing it but I may just implement it!

  Thanks again.

  0