Different Footer Background Image for Each Page

Hi everyone,

I'm wondering if anyone has custom css to change the Footer Background Image for each page.

I have four different footer background images to suit different colour pages on my site.
ie. red image to match red page, cream image to match cream page. 

Would it be possible to use sample code below but to tailor it to target the footer background image instead?
That way I can add the specific image URL into each pages advance code?

Site URL: landerse.au
Password:  red

Thanks for your help,

Hannah

Any ideas? @creedon 🙏

You can try

/*Combine with page Id to set background for specific page*/ footer .section-background-canvas.background-fx-canvas {
  visibility: hidden;
}

/*Combine with page Id to set background for specific page*/ footer .section-background-overlay {
  background-image: url(https://images.unsplash.com/photo-1683009427470-a36fee396389?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8); /*add your image url here*/
  opacity: 1 !important;
}

My testing

Hi @Beyondspace

Thanks for your reply.

And would I put this code in the website css or page advance code?

And, I'm guessing the footer section ID is directing where the code is affecting.
So repeat code with different footer section ID to target each different page?

Thanks,

Hannah

18 minutes ago, hannahnowlan said:

And would I put this code in the website css or page advance code?

both of them are fine. website css is recommended, page advance code require <style> tag

18 minutes ago, hannahnowlan said:

And, I'm guessing the footer section ID is directing where the code is affecting.
So repeat code with different footer section ID to target each different page?

Yes, you are right. You can install the following extension to get Squarespace id: 

Squarespace ID Finder (google.com)

Thanks! I'll give it a go now.

What's the best way to create an image URL?

Please disregard this question, figured out the image URL 🙂

Hi again @Beyondspace

I've added the following to website css but it doesn't seem to be changing the background.
Have I done something incorrectly?

Also, it seems to be interfering with some of my other footer custom code.

Thanks for you help!

//Custom footer background image//
section[data-section-id="66015b5d26f89479f48e33b2"] footer .section-background-canvas.background-fx-canvas {  visibility: hidden;}

section[data-section-id="66015b5d26f89479f48e33b2"] footer .section-background-overlay {
  background-image: url(https://static1.squarespace.com/static/63fb26284dc33403d8683ef2/t/66022a309154a32f34e8497a/1711417914168/Stone.png);
  opacity: 1 !important;}

On 3/26/2024 at 9:05 AM, hannahnowlan said:

remove footer from your code

Hi @tuanphan Thanks so much, the code is working better now!
See screenshot on page landerse.au/gallery are you able to help resolve the section thats still red in colour?
 

Not sure if its possible but on the homepage I am using the background design edits to make the image animated, could that be possible to add to other pages using code?

Thanks,

Hannah

Red border?
I'm also wondering why the scale of the image seems zoomed in/larger in the footer than the original image (below). 

7 hours ago, hannahnowlan said:

Red border?
I'm also wondering why the scale of the image seems zoomed in/larger in the footer than the original image (below). 

Add to your custom css one more attribute to make image cover entirely

section[data-section-id="66015b5d26f89479f48e33b2"] .section-background-overlay {
  background-size: contain;
}

Let me know how it works on your site

Hi @Beyondspace

Thankyou! It is working much better now, there are some fine red dividing lines/borders left.

Let me know if these could be removed?

Also, not even sure if this could be possible but on my homepage, I'm using the footer background image with animation effects, is it possible to mimic these here too?

Unfortunately, I've also just realised that this footer image is now appearing in all footers? ie. covering the original red homepage footer? Hmmmm, maybe it's just simpler if I stick with the standard red animated image footer for all site pages? What do you think?