Jump to content

Creating different background images for each page which can be locked fixed when scrolling

Recommended Posts

Hi there,

I am looking to create a site with only a few pages where I have a background image which fills the whole window and is locked when I scroll down the page (which I think I know how to do).

HOWEVER, I am looking to do this with different images on each page however can only find how to do it globally - is there any templates which allow me to do this different on each page or anyone that knows the code I must insert to accomplish this? (I don't know any code...)

Many thanks in advance,


Link to comment
  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply

If you have not built a site yet, 7.1 which is one template with different design starting layouts,  allows you to set background image per page. If you are wanting to build on 7.0 or have a site there already this is the info you need:

Different templates sometimes need different code. This is a good place to look for what you need, I warn you it will take a bit of work. You will have  have a unique url for each image and the collection id ( needing an id depends on the template) for each page and the code will have to be entered for every page. The id can be found using a chrome plug in found here Squarespace Collection/Block Identifier - Chrome Web Store

The first place to look for your code is here:   https://beaverhero.com/squarespace-background-image/  which will help to  determine if you need to have the unique id for your template. 

Background Images can be uploaded from the custom css window. Once you open it you will see manage custom files button at the bottom. Upload an image for each page that has a unique image. One last thing. The background image will not look the same on mobile and desktop. Something like a sunset, beach that kind of thing looks okay but it is best to view your changes from all devices. 

Link to comment


This topic is now archived and is closed to further replies.

  • 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.