Our graphic designer created this image
What I need to do is to replace the top logo and the enter button on the tree with the svg image, for better quality and to apply some effects.
The image is in 1920:1080 (i.e 16:9 which I assumed would be the closest ratio to be used on desktop and above breakpoints)
I made this page and set the svg’s in black to contrast with the original background image and to see how far from the original it is. I tried setting svgs in relative vh and vw units and when I publish the project it looks very close on my non retina macbook, but when my friend opens it in their retina mac or another larger screen desktop, it’s all over the place.
What is the best way to position the svgs, so that they scale precisely as the background image scales
Maybe I could set the svg’s relative to the sky-grass div block, but the problem is that the background image is set to “contain” and it scales independent of the width and height of this div, so I don’t understand how to do the math here… it’s especially hard, when the height of the browser window is changing, no scaling is happening in this case…
Thanks a lot in advance!
Here is my site Read-Only: **LINK
The page is called Welcome NEW, I am only interested in breakpoints starting from Dekstop and above