Jump to content

(Aviator) Change Background Image

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 11
  • Views 560
  • Created
  • Last Reply

Top Posters In This Topic

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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
On 12/3/2022 at 3:13 AM, Cladd said:

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

ah, add !important to the code

<style>
   div#outerWrapper {
    background-image: url(https://static1.squarespace.com/static/5a89d5b9d7bdce4550a848d7/t/638a5ab36f0e1e67bd9d62ed/1670011573419/CLeyes2.jpg) !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 weeks later...

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!!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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!

Link to comment

Create an account or sign in to comment

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


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