Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
BennyBoyDev

Custom background images for each page

Question

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!

Edited by BennyBoyDev

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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


Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

Share this post


Link to post
  • 0
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!

Share this post


Link to post
  • 0
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>


Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0
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)


Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...