I'm rebuilding a web using several svgs as full-screen backgrounds for specific sections. Everything is working fine for laptop, devices and phones but when viewing the page on higher screen resolutions the SVG gets cropped (images provided). I've also added the SVG code for the image
I saw your pages and suggest creating a variation class called .align-bottom and add this to your container you want the background image to be aligned to. This class will position the image towards the bottom and bleed the top edge.
I can't tell if your background section has content in it, so you may need to specifiy a minimum height. Also to prevent the cropping, change the background-position so it is vertically aligned to the top and horizontally centered. Here is a demo:https://codepen.io/JacobLett/pen/NWNqedy
On most places the background has content so your code actually solved almost every problem but on some pages I'm just assuming that the content can't strech the background enough on bigger screen resolutions. Is there a work around for that? Should the SVG be made with less height?
Hi Linus. Could you share a URL of the page showing the issue? It is hard to say what is going on. You could also experiement with contain instead of cover.
I saw your pages and suggest creating a variation class called .align-bottom and add this to your container you want the background image to be aligned to. This class will position the image towards the bottom and bleed the top edge.