I'm trying to do this challenge too. I trouble with background images position 😄 Your solution is perfect.
I want to use this in my code but i don't want just copy paste. Also i want to understand what's the idea on this solution.
Could you explain me how your code(background-position) works.
vh units and combined them with percentages for the
background-position property. The reason I did this is that if you set the
background-position property in just
vh units, the SVG backgrounds won't move around when the page is resized, but if you use just percentages, they move around too much (at least, I think so). I combined them using
calc so that the SVGs would mostly stay in their place but move around just a little bit when the page is resized. 😊
However, that really isn't necessary. Simply using
vh units to position the background SVGs is totally fine and works great. You can also use good 'ol
px values instead. 😉
Here's a nice article from MDN on backgrounds and borders in CSS, and this article (also from MDN) goes into more depth on the
background-position property. They might help you!
Keep coding (and happy coding, too)! 😁