profile card component using flex box

Community feedback

• 

  Malik Elbadri•590

  @MaliklarPosted over 2 years ago

  Hi Ibrahim, Your work is great, but I opened your solution and didn't understand your approach of setting the background images. You can check my repo at Github for this problem and I hope it will be of help to you Click Here. <br> This is how I set the background image:

  body {
      padding: 0px;
      margin: 0px;
      background-color: var(--Darkcyan);
      background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
      background-position-x: left, right;
      background-position-y: -50vh, 50vh;
      background-attachment: fixed;
      background-size: contain;
      background-repeat: no-repeat, no-repeat;
  }
   
  

  And for the card I just simply set the using the image attribute and gave the profile image a margin-top: -50% of its size to make it over the background image

  Marked as helpful

  2

  ---

  

  ibrahim•450

  @bagggaryPosted over 2 years ago

  @Maliklar Thanks Malik that really helped me a lot I've never thought about position x and y properties , thanks for your time

  1
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Ibrahim, congratulations for your solution!

  About the image import, I open your Github repository and I note that you image isn't being imported only because you did a little mistake writing the image location, you wrote svg instead of png this is why you don't see the image render. Fix this with the code below:

  .image { background-image: url(../images/bg-pattern-card.png);}

  See if works and say me then. I hope it help u bro, keep coding!

  Marked as helpful

  1

  ---

  

  ibrahim•450

  @bagggaryPosted over 2 years ago

  @correlucas Thanks Lucas I change it and it works , appreciate your help

  0