Submitted almost 3 years ago

CSS, FLEX and HTML

@Wandesanguine

A solution to the Profile card component challenge

Solution retrospective

I have a problem in setting up the body background the way it should be. I find it very difficult to add the corresponding images and placing it where they shooud be. I will be very glad if sosmeone can help me out in doing this. Thank you guys. HAPPY CODING.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Account deletedPosted almost 3 years ago
Hi@Wandesanguine , for the svg background patterns i used them as background-image in the body like this :

body {

background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);

background-repeat: no-repeat, no-repeat;

background-position: right 60vw bottom 39vh, left 60vw top 39vh; }

You could check my solution for more details .

I hope this help you .
Marked as helpful
Veronica Orozco•260
@VLOrozco
Posted almost 3 years ago
Hey Yewande,

Mohammed had great things to say, especially with the svg files!

As far as positioning them on your webpage, research position absolute/relative (but be careful as they can also create extra whitespace at the bottom of your screen if not used appropriately) - then use transform:rotate(__deg) to turn the image to match the design [insert the number before percentage mark for degree in the rotate value];

Hope that helps! Happy coding to you too! ~V
Marked as helpful
Account deletedPosted almost 3 years ago
@Wandesanguine You forgot to add height: 100vh; & width: 100vw; to the body

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord