How can I add a parallax effect to my website's background image?

Store Design
1

Hi,

I would like to add a parallax effect to the background image of my theme:

Here is the website preview:

https://apm-hk.myshopify.com/?_ab=0&_fd=0&_sc=1&key=a68d1219326d6dee508d3cbd2479c62e6fe01ea1fe0ad79db86bb94b1cbddb27

As you can see the unisex collection background is fixed but I would like it to scroll with the page but slower like the images on this page:

https://codepen.io/RenanB/pen/GZeBNg

Is this possible?

Thanks

2

HI @JKIRK ,

.ImageHero__Image.Image–zoomOut.Image–lazyLoaded {
background-attachment: fixed;
}

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.

If it will not work then add this

.ImageHero__Image.Image–zoomOut.Image–lazyLoaded {
background-attachment: fixed !important;
}

Please let me know further query .

you can connect me on via Email or Skype

Thanks .

3

Hi @oscprofessional

The background image is already fixed, I want to background image to scroll but slower than the text in front.

Like the parallax speed 0.25 on this example:

https://codepen.io/RenanB/pen/GZeBNg

Thanks

4

Hi @JKIRK

Follow these steps for parallax effect:

  1. From your Shopify admin, go to Online Store > Themes
  2. Find the theme, and then click Actions > Duplicate
  3. Find the duplicate of your live theme then click Actions > Edit Code
  4. On the left bar, search for a folder called Assets then add the following code inside the “theme.scss.liquid” file

.ImageHero__Image.Image–zoomOut.Image–lazyLoaded {

background-attachment: fixed;

}

Add this css at the bottom of theme.scss.liquid file

Or

In case above code didn’t worked try this:

.ImageHero__Image.Image–zoomOut.Image–lazyLoaded {

background-attachment: fixed !important;

}

Do let us know if you have any further query

You can connect on Email

Thanks