@mesutcifci
Posted
Hi. Congratulations.
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.
Thanks.
@ApplePieGiraffe
Posted
@mesutcifci
Thanks, mesutcifci!
I used vw
and 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 vw
and 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 vw
or vh
units to position the background SVGs is totally fine and works great. You can also use good 'ol rem
s or 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)! 😁