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.
@mohammedlahboub
Posted
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
@VLOrozco
Posted
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
@mohammedlahboub
Posted
@Wandesanguine
You forgot to add height: 100vh; & width: 100vw; to the body
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
