Best practices to position scale elements relative to the background image position

Hi evryone!

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

Best practice would be to get your designer to send you the image without the text on it, so it’ll be easier to manage on the web.

That’s how it is, I’m just using an image with text, to keep the text position specifically where it was intended to be…i.e to be as close to original as possible, after that I will replace if with the image with no tex.