Easy CSS for Parallax Scrolling on Squarespace 7.1 Sections - FINALLY!

Oh my gosh, my prayers were answered when I finally figured this out. I legit let out audible praise to the heavens.

If you’ve worked in Squarespace for any amount of time, you may have been super bummed when they removed the parallax scrolling feature. Why Squarespace!?? This background effect is a designer favorite and I’ve been trying to recreate it myself ever since.

There are tons of tutorials out there that promise to deliver parallax scrolling, but they usually require some kind of complicated combination of JavaScript, HTML, and CSS with all sorts of extra steps, not to mention the fact that they don’t even work half the time. So, you could struggle eternally through that, or you could fake it (which I’ve done plenty of times) with the half-hearted effect you can achieve by messing around with image style settings. BUT! I have good news. I finally found a super simple way to get real deal parallax scrolling. And you’ll be thrilled to know that it only takes a few lines of CSS, plus one small but important step. You’ll see in a second…

What is Parallax Scrolling?

Parallax scrolling is a design effect where the background moves at a different speed than the foreground as you scroll, creating a sense of depth and motion. It makes websites feel more dynamic and engaging without being overwhelming.

How To Add Parallax Scrolling in Squarespace 7.1

Follow the steps below to add parallax to any section in Squarespace fluid engine. But hold your horses! Keep reading! This code will not work if you haven’t followed one important step. After hours of hot tears and frustration, I finally stumbled upon the secret to making this effective. Turn off section dividers. That’s it! That was the winning step for me. Combine that with the CSS code below, and you’ve got yourself a legit parallax effect.

1. Add a Background Image

Before you add the code, make sure your section has a background image. Parallax scrolling affects background images, so if there’s no image, you won’t see the effect.

2. Copy the Code

Copy the CSS code below. Be sure to replace "YOUR-SECTION-ID" with your own section ID in both places in the code. I use the Squarespace ID Finder Chrome extension to locate these (so easy, highly recommend), but you can also find the section ID by copying the data-section-id code in your Inspector (if using Chrome or Edge).

3. Add the CSS to Your Site

Go to Pages > Website Tools > Custom CSS in your Squarespace dashboard.

Paste the code above, replacing "YOUR-SECTION-ID" with the actual ID you copied.

4. Turn Off Section Dividers

In the Editor, click on the section you’re working on.

Under Design, scroll down to Styling and make sure dividers are toggled off.

5. Save and Refresh

Click Save, refresh your page, and enjoy your smooth parallax effect!

---

CSS code for Adding Parallax Scrolling

/* Parallax Scrolling for Squarespace 7.1 */
section[data-section-id="YOUR-SECTION-ID"]
.section-background {
  position: fixed;
  background-size: cover;
  background-position: center;
} 

section[data-section-id="YOUR-SECTION-ID"]
.section-border { 
  position: absolute;
  overflow: hidden;
  -webkit-clip-path: inset(0px);
} 

---

Why Does This Work?

This works because setting .section-background to position: fixed; makes the background stay put while everything else scrolls over it. The .section-border part keeps the background clipped neatly inside its section, so it doesn’t overlap other parts of your site.

Is This the Best Parallax Method for Squarespace 7.1?

I happen to think so! After struggling with so many other attempts, this, for me, has been by far the simplest and most effective.

No JavaScript Needed – Just clean, simple CSS.
Looks Like True Parallax – Not a fake background trick.
Works on Any Section – Just update the section ID to use it anywhere on your site.
Works in mobile – Hooray, no changes necessary for it to work in mobile view!

Common Questions About Parallax in Squarespace 7.1

Q: Will this work on mobile? A: Yes! Unlike many other parallax methods, this approach does work on mobile devices. The fixed background effect remains visible, for a smooth scrolling experience across all device.

Q: Can I use this on multiple sections? A: Yes! Just copy the CSS and change the data-section-id for each section you want to apply it to.

Q: What if my background image isn’t displaying correctly? A: Double-check that your section ID is correct, and make sure section dividers are turned off.

If you’ve been trying to bring back parallax scrolling in Squarespace 7.1, this is hands-down the easiest and best way to do it. No extra coding knowledge is needed, and it looks perfecto.

Give it a try and let me know how it works for you! If you run into any issues, drop a comment—I’m always happy to help.

–LINDSEY illicreative.com