SVG scaling issue when used as background image

I got a rather strange issue with several SVG files and can’t wrap my head around it. The following scenario: I use the SVGs as background images, set them to Contain and place them at the Top or Bottom.

background-image_settings

Eventually this should scale the SVGs according to the size the element that contains it, right? Well, it nearly does.

The SVG scales but not always perfectly. Sometimes there are gaps on the sides or a fine offset from top/bottom. But it’s not a consistent issue: It seems to be related to the browser window size. Sometimes everything looks perfect, sometimes there are gaps. It occures across all devices and browsers.



CleanShot 2022-04-29 at 22.32.17

Additional info:
→ Margin and padding are set to 0 everywhere
→ The SVG files are cleaned up and optimized for web

That issue drives me insaaane and I can’t solve it or even track the problem down. Does somebody know help? Would appreciate any suggestions or help :slight_smile:


Here is my site Read-Only: LINK