Jump to content

Background Image wont take up full page

Recommended Posts

Site URL: https://www.richiequake.com/

I have been trying multiple ways to get a background image to take up the whole page. Using this CSS:

 

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

I have been able to get the background image to take up the whole page except: 1) There is still a black space on the left side of the page, and 2) The image is zoomed in and the rest of the picture is not displayed. I feel I'm missing something simple to achieve what I want but can't figure it out. The page is https://www.richiequake.com/ and you can view it using Help123. How can I get the background image to take up the whole page and that the image itself is completely shown and not zoomed in on one part of it?

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

20 minutes ago, Thurstings said:

@richieqquake You should be able to right click your page on the left hand side where your pages are listed. Under page settings go to the 'Media' tab and you can upload a background image there, try uploading it there and let me know how it comes out? Thumbs up it works!

I want the image to be the whole background for the specific page. I tried using this method before and it just adds the image as an element/banner to the page, not make it a background image..

Edited by richieqquake
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.