Frontend Mentor | Profile Card Component using Github coding challenge solution

Community feedback

@gelizabeth

Posted about 3 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! :)

Efosa Collins EVBOWE• 365

@efecollins

Posted about 3 years ago

@gelizabeth

Thanks, I'll try this too.

Efosa Collins EVBOWE• 365

@efecollins

Posted about 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/)

Helder Balbino• 45

@HelderBalbino

Posted about 3 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 :)

Efosa Collins EVBOWE• 365

@efecollins

Posted about 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.

Helder Balbino• 45

@HelderBalbino

Posted about 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%; }

Profile Card Component using Github

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community