Profile card component using HTML and CSS.
Design comparison
Solution retrospective
Hi There ๐!
This is my solution to the challenge, any advice on how to improve my code is welcome!
Unfortunately, as you may notice, I had difficulty with setting the background correctly using the provided svg's, would anyone be able to point me to the correct way?
Community feedback
- @MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- The GitHub repository link is incorrect.
- You could use the CSS backgrounds properties to set the background:
body { . . . background-color: hsl(185, 75%, 39%); background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh; }
background-color
Set the background colorbackground-image
Set a background imagebackground-repeat
Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.background-position
Sets the starting position of a background image. More information- You can also specify the size of the background image with background-size
The
background
property is shorthand for all the properties mentioned above but for now. It is better to understand them separately.The
background-position
for me worked with the vw (viewport width) and vh (viewport height) units, but you can also use percentages. It's just a matter of trial and error to place them as you wish.References:
I hope you find it useful! ๐
Happy coding!
2@GeorgelafayenPosted about 1 year agoThank you so much @MelvinAguilar for your time and valuable advice!
Ps. Github link fixed ๐
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