Fix Full Screen Background Image On Squarespace Page

I'm having issues getting background images to display full screen (take up the whole background space) with a Squarespace page. My CSS was working but somehow it stopped working a

Solution 1:

To address just the height of that particular image background, add the following:

min-height: calc(100vh - 11px);

Add it within the #collection-5de6d28545f1a7075b7a2741 #canvas{...} rules you already have and that should work. Note that the 11px is based on the value you currently have for padding-top. If you were to change that value, you'd want to similarly update it within the min-height rule as well.

What that is doing is saying, basically "if the content of the page isn't tall enough to fill the current height of the browser window, use a minimum height of however tall the browser is, minus the padding-top amount on the element".