Custom background images for each page

Hey Squarespace community,

I'm trying to change individual page backgrounds on the Aubrey template. I've had a look around previous posts but i can't find anything specific to this template.

I have all of my collection body ID's for each page and uploaded my images to an external image host with direct image links provided.

Currently i am trying these code variations in the header injection of each page, however, they are not having an effect:

Take 1

body#collection-5d98bbe5b268dc547a8fb81c {
   background-position: center top !important;
   background-image: url("//IMAGE URL");
}

Take 2

body#collection-5d98bbe5b268dc547a8fb81c {

    background-position: center top !important;
    background-repeat: no-repeat;
    background-image: url("//IMAGE URL");
 background-size: contain;

}

Take 3

#collection-5d98bbe5b268dc547a8fb81c .Main {
background-image: url("IMAGE URL")!important;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-repeat: repeat;
}

Can anyone help?

Thank you!

@BennyBoyDev Use this code

body#collection-53c82aade4b06d1cfa9a4140 div#outerWrapper {
    background: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg) no-repeat center center !important;
    background-size: cover !important;
}

I wrote this, you can see more: https://beaverhero.com/aubrey-squarespace/#Page_Background_Image

Replacing body#...40 with page ID. To know how to find Page ID. See my signature.

15 hours ago, tuanphan said:

@BennyBoyDev Use this code

body#collection-53c82aade4b06d1cfa9a4140 div#outerWrapper {
    background: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg) no-repeat center center !important;
    background-size: cover !important;
}

I wrote this, you can see more: https://beaverhero.com/aubrey-squarespace/#Page_Background_Image

Replacing body#...40 with page ID. To know how to find Page ID. See my signature.

Hey TuanPhan,

thank you for your response.

I placed the code in the page header injection, however, it did not have any effect. It just made the code appear at the top of the page.

Any advice?

Thank you!

12 minutes ago, BennyBoyDev said:

Hey TuanPhan,

thank you for your response.

I placed the code in the page header injection, however, it did not have any effect. It just made the code appear at the top of the page.

Any advice?

Thank you!

Add to HOME > DESIGN > CUSTOM CSS

If you want to insert to Header, wrap code in style tag

<style> code I sent </style>

On 12/2/2019 at 1:43 PM, tuanphan said:

Add to HOME > DESIGN > CUSTOM CSS

If you want to insert to Header, wrap code in style tag

<style> code I sent </style>

Hey TuanPhan,

Thank you, that's working perfectly!

I'm not sure if you'll be able to answer this, but, the images are stretching too much and coming out blurry via your method. 

But when uploaded via SquareSpace editor it is coming out high quality.

Any advice?

Kind regards,

Ben

8 hours ago, BennyBoyDev said:

Hey TuanPhan,

Thank you, that's working perfectly!

I'm not sure if you'll be able to answer this, but, the images are stretching too much and coming out blurry via your method. 

But when uploaded via SquareSpace editor it is coming out high quality.

Any advice?

Kind regards,

Ben

background size cover, contain or auto

cover: It will cover the whole page
contain: original size (best quality)