Jump to content

Custom Code for Parallax resizing image on mobile

Recommended Posts

Site URL: https://oleander-wedge-k254.squarespace.com/

Hi there,

I'm trying to add parallax scrolling into my site using the below code I found on a YouTube tutorial. Even though we've got the - height: 100% - bit in there ...

  • 1. the background images only take up the top portion of the container on certain screen sizes
  • 2. my foreground images come out HUMONGOUS on mobile (this is secondary and seems like a separate issue)

Any advice on how to use parallax but keep the background images filling the height of the container in any viewing format?

Thanks so much!!


Password: Kessiah

Using this code (disabled on the site right now):

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script>
  var images = document.querySelectorAll('.section-background img');
  new simpleParallax(images, {
    scale: 1.5,
    delay: 3
.simpleParallax (
  height: 100%


Link to comment
  • Replies 0
  • Views 565
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • 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.