Design comparison
Solution retrospective
-
I found the background SVG's to be difficult to get right regarding their positions as the window scales/resizes. I was able to set them correctly, but they get out of whack when the window sizes down to mobile. After researching for other solutions/ways of achieving the background image's proper positions, I realize simply positioning them absolute directly into the HTML rather than in the CSS property for an element may be the way to go.
-
I am unsure of how to keep the background SVG's in proper place as the screen resizes. Will try simple absolute positioning rather than CSS property route (aka background-image with multiple images and background color at once).
-
What is the best practice for multiple SVG background images in regards to scaling windows and keeping them in proper place no matter what size the window is? Is it to just position them absolute?
Community feedback
- @avinnoPosted about 1 year ago
After looking at other's solutions, I realized many just positioned them absolute and not as an actual multi-background-image in CSS like I initially did.
I will likely remove the background-image in the CSS and just add them to the DOM as position: absolute;. This appears straight forward and simple this way. My aim initially was to make it work with the background-image CSS property with multiple backgrounds, but this seems overly complicated and may not be a best practice for this particular instance.
Again, I always welcome feedback, so if you have any thoughts or comments on this, please post them! Thanks!
0
Please log in to post a comment
Log in with GitHub
Join 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