Parallax scrolling is one of the most popular effects to add to background images on a website but until recently, adding the effect to Squarespace required quite a lot of custom code.

Luckily, Squarespace have launched various new background effects one of which is, you guessed it, parallax scrolling. 

In this tutorial we’ll explore exactly how to add parallax scrolling to your background images on Squarespace.

Watch the video

Check out the YouTube video below 👇

Head to the page and section you want to add the effect to and select Edit Section.

Within the panel that appears select the background tab and add your background image.

Once you’ve added your chosen background image select Image Effect and in the grid of effects that appears you can select Parallax.

You’ll see which effect is which by hovering over the images in the panel.

You can then either randomise the effect or change the settings yourself. You can play around with the effect but if you want it to be a vertical scroll then you need to ensure your angle is set to 90. 

You can then also edit the intensity of the effect and decide whether or not you want to add a zoom. 

Once you’re happy, click save and exit and you’ll have added a parallax effect to your background image on Squarespace.

📩 Join the inner circle to get exclusive code updates

This is a great way to add depth and interest to your Squarespace web pages.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?