(Aviator) Change Background Image

Hello, 

Is there a way to change the background image for each of the pages on my site? Ideally, I'd like a different image for each page. "About" would have a specific image, "Fiction" would have its own image, and so on. I've done some digging, but haven't had much luck. 

Thank you!

site: www.catlynladd.com
template: Aviator

Hey @Cladd,

It looks like that's a 7.0 site. Does this SS article help? 

https://support.squarespace.com/hc/en-us/articles/205812788-Adding-site-wide-background-images-in-version-7-0

Yes and no. I've read this article before and it explains how to change the Info page background from the rest of the site or site-wide backgrounds. I'm trying to change the background on individual pages instead of site-wide. I don't think Aviator supports Banners so I can't add a new background image that way. Thank you for the suggestion!

On 11/16/2022 at 12:37 PM, Cladd said:

Yes and no. I've read this article before and it explains how to change the Info page background from the rest of the site or site-wide backgrounds. I'm trying to change the background on individual pages instead of site-wide. I don't think Aviator supports Banners so I can't add a new background image that way. Thank you for the suggestion!

On 11/15/2022 at 11:40 AM, Cladd said:

Hello, 

Is there a way to change the background image for each of the pages on my site? Ideally, I'd like a different image for each page. "About" would have a specific image, "Fiction" would have its own image, and so on. I've done some digging, but haven't had much luck. 

Thank you!

site: www.catlynladd.com
template: Aviator

Edit a About Page > Add a Code Block (anywhere) > Paste this code

<style>
  div#outerWrapper {
    background-image: url(https://cdn.pixabay.com/photo/2022/10/21/10/51/snail-7536762_1280.jpg);
}
</style>

Repeat similar for other pages

Thank you so much! That was it. 

Is there a way to have the image also show on the mobile view? It shows for web and tablet, but not mobile.

Thank you again!

On 11/22/2022 at 11:31 PM, Cladd said:

Thank you so much! That was it. 

Is there a way to have the image also show on the mobile view? It shows for web and tablet, but not mobile.

Thank you again!

Which page did you add the code?

I added code to all of the pages (minus the homepage). 

Thank you so much! That solved it. I really appreciate your help!

-CL

Next issue: all the background images are suddenly zoomed way in. They used to "fit" fixed on the page and the text would just scroll, now they are zoomed in so close they are distorted. I've tried messing with the placement/position/repeat but nothing helps. Any ideas?

Thank you in advance!!

On 1/11/2023 at 11:33 AM, Cladd said:

Next issue: all the background images are suddenly zoomed way in. They used to "fit" fixed on the page and the text would just scroll, now they are zoomed in so close they are distorted. I've tried messing with the placement/position/repeat but nothing helps. Any ideas?

Thank you in advance!!

Try using a bigger image

Any tips on what image size to use? I changed one background image to a larger image, and it just made it less pixelated, but still the same size/zoom.

Ideally, I'd like the background image to remain fixed, while the content scrolls.

Thank you for all your help. It is greatly appreciated!