Profile Card Component using Github

Community feedback

• 

  Elizabeth•460

  @gelizabethPosted almost 4 years ago

  Hi! If your question is about card background - create div with height and width you need and set background: url("path to your svg"). You can set it's border-radius so there will be no need to change your svg. Happy coding! :)

  1

  ---

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @gelizabeth

  Thanks, I'll try this too.

  0

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @gelizabeth

  Thanks so much, I don't know how to express how grateful I am. It worked. God bless you. The link to the website is [here] (https://efecollins.github.io/pcard/)

  0
• 

  Helder Balbino•45

  @HelderBalbinoPosted almost 4 years ago

  Hello Collins

  Answering your questions, you can make an SVG as a background img using the normal css property: background-image: url(images/bg-pattern-bottom.svg),

  I've tried doing that using the imgs as background-image, but It was too hard for me to get the desired design, so I found that it's better to put the images on the html and use them inside a div with position: absolute , and the set a parent div with position: relative

  my solution to the problem;

  section .background { height: 100%; width: 100%; overflow: hidden; position: relative; }

  .background div:nth-of-type(1) { position: absolute; top: -425px; left: -350px; }

  .background div:nth-of-type(2) { position: absolute; bottom: -550px; right: -300px; }

  Hope my explanation helps you! feel free to ask for help anytime :)

  1

  ---

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @HelderBalbino Thanks the code works but the problem now is that the SVG image for the card is hidden. I have been trying to make it visible but it's not working.

  1

  

  Helder Balbino•45

  @HelderBalbinoPosted over 3 years ago

  @efecollins

  You're welcome! To solve your new problem try setting a z-index position to the background imgs, you could try this:

  .background div:nth-of-type(1) { position: absolute; top: -500px; left: -350px; z-index: -1; border-radius: 50%; }

  .background div:nth-of-type(2) { position: absolute ; bottom: -550px; right: -300px; z-index: -1; border-radius: 50%; }

  0