Design comparison
Solution retrospective
I really struggle on the background but i manage to make it similiar to the design, what or how is the best approach to make this svg background?
any feedback would be immensely helpful, thank you so much
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @fsuropaty ๐, good job completing this challenge! ๐
I have a suggestion that you might consider to improve your code:
You could use the CSS backgrounds properties to set the background:
body { . . . background-color: var(--dark-cyan); 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 those tips will help you! ๐
Good job, and happy coding! ๐
Marked as helpful2@fsuropatyPosted about 2 years ago@MelvinAguilar i didn't know that i can stack the svgs with background properties, Thank you very much for your feedback
1
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