MasonCreative Posted January 18 Posted January 18 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!
Solution Ziggy Posted January 18 Solution Posted January 18 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. MasonCreative 1 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?
MasonCreative Posted January 18 Author Posted January 18 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.
Ziggy Posted January 18 Posted January 18 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?
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment