Jump to content

Parallax banner image size in Basil template 7.1

Go to solution Solved by Ziggy,

Recommended Posts

Posted

Please advise: I cannot share the site due to it being a re-build in a new template within my existing live site.

I am trying to target the parallax banner images in the Basil template -- it seems that it is somehow 'zooming' in on the images I upload and causing them to display at sizes far bigger than the image is, which is causing pixelation, image going off the edge of the page, etc. I can't seem to figure out how to target the image and perhaps force the max-width on it or something to avoid this. I have already experimented with uploading different sizes of images, etc. and still looks bad. See screenshots for how the image looks currently, the SS ids, what the image actually looks like and html code... thanks in advance for any advice!

 

 

2.png

1.png

Screenshot 2024-01-18 071804.png

abstract-bg.jpg

  • Solution
Posted

When enabling parallax, the image needs to be ~20% taller than the space it is filling so that it can move in the background and not show blank space. It looks like your image isn't tall enough so in making the image 20% taller than the section it is therefore having to crop on the sides. It's generally a good idea to design your background image for parallax with more space at the top/bottom than you need to account for this and reduce the chance of cropping on the sides.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
3 hours ago, Ziggy said:

When enabling parallax, the image needs to be ~20% taller than the space it is filling so that it can move in the background

Thanks Ziggy, I understand that and that may solve for this image -- I'll give it a shot. Would still love to know how to target those images specifically so I can experiment with adjustments via CSS, any idea what they're called here? Can't seem to target them with any code.

Posted

I would need to inspect your website to give you those selectors (I did read above that you may not be able to do this yet). What are you hoping to change?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.