Search code examples
htmlcssbackground-imagesquarespace

Issue with getting background image to display full page using Squarespace

I have gotten this CSS code to display a background image full page in a Squarespace website I'm working on:

#collection-5de6d28545f1a7075b7a2741 #canvas{
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

However, in the main Home page of the website the background image is stuck in the upper part of the page. The image is big enough that it can be stretched to fit the whole page. In the preview you get while using the Squarespace editor the code seem to do it's purpose, but once you actually go to the page it's not working because there's a black space taking up most of the screen. Because I'm not very familiar with how Squarespace structures the HTML code for you, I don't know if the issue has to do with my CSS or some HTML element. How can I get the background image to display full page?

UPDATE

Using Brandon's suggestion, I manage to get the image to take up the page from top to bottom, however in width there are still black spaces on both sides of the image.

Now I'm using :

#collection-5de6d28545f1a7075b7a2741 #canvas{
  background-position: center top !important;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 11px);
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)
}

With this CSS I can get the background image to take up almost all the page except there is still a black space on the left side. Also this cas caused the image to be zoomed in, so even thought it is taking the space I want, the image is now zoomed in to one part of the image.

Solution

  • Please try to add below css on the on exisitng website css for canvas

    #collection-5de6d28545f1a7075b7a2741 #canvas {
    width: 100%;
    height: 100%;
    min-height: calc(89vh);
    background: url(https://static1.squarespace.com/static/5cff45a…/t/5dc6fce…/1573321963518/richie_+5.jpeg);
    box-sizing: border-box;
    margin: 0;
    max-width: none; 
}