How To (Easily) Add Parallax Scrolling to Squarespace 7.1

Do you miss the popular parallax scrolling effect that was available with Squarespace 7.0? Join the club! Not sure why they decided to get rid of it, but hey, they love surprising us, don’t they 😉. If you’re not familiar with what parallax scrolling is - it’s basically a cool web design technique in which the website background appears to stay still, while the foreground content keeps moving (check out an example at the end of this article). This illusion creates a faux-3D effect and has become a popular trend in 21st century web design. Parallax scrolling offers a unique and creative approach to website storytelling and is an interactive method used by experts to keep users engaged. It’s a great way to stimulate your website visitors with different levels of depth and a thrilling sense of animation. Parallax scrolling also encourages longer page visits because typically the user’s curiosity will guide them through the entire page, right down to your call-to-action.

If you’re looking to add parallax scrolling to your Squarespace website, keep reading! I have outlined 2 options down below - one without the use of code (for beginners), and one slightly better option with the use of code (for those looking to get their hands dirty).

---

*This post contains affiliate links. I earn a small commission when you click on the links and make a purchase. This comes at no additional cost to you. Affiliate links are marked with an asterisk.

---

Does Squarespace 7.1 Have Parallax?

Unfortunately the trendy, dazzling feature of parallax scrolling disappeared with Squarespace 7.0. Squarespace 7.1 does not have quite the same effect built-in to it’s interface.

However, Squarespace does provide alternative ways to create dynamic and engaging scrolling effects using the built-in background effects and of course, custom CSS. While parallax scrolling may not be available out of the box in Squarespace 7.1, you can still create a captivating website design by leveraging some of their newer design tools.

One of the newer design tools includes the “Tilt Image Effect” you’ll see under a section’s background settings. Here’s how to enable it:

---

Option 1️⃣ — Squarespace 7.1 Image Tilt Effect (simple, no code):

1. To enable this effect, hover over the section you’d like to edit and click on the little pencil icon

2. Then, click on the “Background” tab

3. Scroll down until you see the “Image Effect” drop-down option and select “Tilt”

You’ll notice that the results aren’t quite the same as the old parallax effect, but it’s similar, and a good option for those not looking to add code to their site.

Now, if you’re not technologically challenged, keep reading for a different parallax scrolling option for 7.1 (yes this involves code). In my opinion, this solution is actually even more striking than Squarespace’s original parallax effect from 7.0.

---

Option 2️⃣ — Squarespace 7.1 Parallax (looks cooler, custom CSS):

If you’ve made it to this point, that means you’re up for a coding challenge! Don’t worry - this is actually not hard at all. As long as you can copy and paste, you’re pretty much solid. You’ll probably even feel pretty accomplished afterwards.

Step #1: Add Background Image

Add a background image as you normally would to any section of your website’s page.

1. Hover over your website’s page and click EDIT (top left corner)

2. Hover over the section you’d like to edit and click on the little pencil icon

3. Click on the Background tab, upload an image and Save

Step #2: Custom Code Injection

Copy and paste the following code into your website’s code injection.

1. Go to Website > Pages > Website Tools (bottom left corner) > Code Injection

2. Paste the following code into the “FOOTER” field and Save

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<!-- script for background images parallax -->
<script type="text/javascript">
  $(window).on("load",function(e){
    let backgrounds = document.querySelectorAll(".page-section.has-background .section-background");
    for (let i=0; i<backgrounds.length; i++) {
      let image = backgrounds[i].querySelector("img");
      let imageSRC = image.getAttribute("data-src");
      backgrounds[i].style.backgroundImage = 'url(' + imageSRC + ')';
      image.style.display = "none";
    }
  });
</script>

Step #3: Custom CSS

Copy and paste the following code into your website’s custom CSS.

1. Go to Website > Pages > Website Tools (bottom left corner) > Custom CSS

2. Paste the following CSS into the CSS field and Save

3. Note: if your website has existing CSS, just paste the new CSS below what already exists

//parallax background images
.page-section.has-background {
  .section-background {
    background-size: cover;
    background-position: center center;

    @media (min-width: 1000px) {
      background-attachment: fixed;

      img {
        display: none !important;
      }
    }
  }
}

That’s it! Congrats 🎉 You should now have parallax scrolling on all of your website’s background images.

The final result should look something like this —

TROUBLESHOOTING
If the parallax effect is not correctly working after you’ve properly copied and pasted the CSS and JavaScript above, make sure you have all background image effects turned off 😊. To do this, click on the Background tab on the section that contains the image, scroll down to Image Effect, and make sure None is selected.

Note: this effect is not compatible with mobile devices, but looks wonderful on desktop!

---

Want a Squarespace Template that includes Parallax Scrolling?

I currently sell two Squarespace templates with parallax scrolling automatically built in!

My Premium Squarespace Templates, Taste of Décor and Legal Edge, come with the custom parallax scrolling effect automatically built into the templates. With either of these templates, every single background image will feature parallax scrolling by default, requiring no extra effort from you!

---

Did you enjoy this article? Check out more articles like this in the Squarespace Blog. In the blog, I share tips for hiring Squarespace Designers (or becoming one!), custom CSS and Javascript solutions, latest Squarespace news and updates, my favorite plugins, Squarespace Template Shops, and more!

---

Browse Premium Squarespace Templates

My modern, service-based templates are designed for entrepreneurs and small businesses who are looking for a professional website design without breaking the bank. Each one of my templates includes my 10-module launch course (which walks you through every single step of customizing the template) and my Bonus SEO Crash Course (which outlines the exact techniques I use to help my SEO clients land on Google page 1).

---

More from the Squarespace Design blog …