Design comparison
Solution retrospective
I would love some feedback on the background as I found this the most difficult and it's still not exactly how I would want it.
Community feedback
- @RicePenguinPosted over 3 years ago
Hi, This was the first challenge I did. I tried to create the background using the background-image property for the body but I just couldn't position them how I wanted. What worked for me was including the circles as elements and using absolute position. .circle-1 { position: absolute; right: 55%; bottom: 50%; } https://ricepenguin.github.io/Challenge1profilecardcomponent/
0 - @arturpawlowski5Posted over 3 years ago
Hi,
I'm starting too with Dev Web but I already made this Challenge so hope can help a little bit.
With your background image, you can try to add 2 URLs with IMG to your one DIV or another container you use. Try to look at this code:
#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: left top, right bottom; background-repeat: no-repeat, repeat; }
More here: w3schools
With this code, you will have the same time 2 IMGs in the Background.
I see in your HTML that you used that but try to add too the position. Now it is:
background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg"); background-repeat: no-repeat, no-repeat;
Hope this helps.
0
Please log in to post a comment
Log in with GitHubJoin 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