The parallax effect makes a background image scroll slower than the rest of the page giving the image a sense of depth. An overlay can also be added to tone down the image to not take away from the content that's on top.

example site:
https://hc-bridge.solutiosoftware.com/

To add the parallax

1. Add the parallax-effect class to the section that needs the effect

parallax-effect

2. Add this css into the override.css file and set the url of the background image.

.site-1-home #g-extension {
    background: url('/images/template/paralax2.jpg') 50% 50% no-repeat;
    background-size: 125% auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
}

.site-1-home.tablet-screen #g-extension {
    background: url('/images/template/paralax2.jpg') 50% 50% no-repeat;
    background-size: cover;
    background-attachment: unset !important;
}

@media (max-width: 50.99rem) {
  .site-1-home #g-extension {
      background: url('/images/template/paralax2.jpg') 50% 50% no-repeat;
      background-size: cover;
  }
}

Make sure to change the selector to reflect the section you are adding the effect to and update the url path to the image you want to use.

Also, make sure that the image is large. Something around 1600x1200, or bigger.

You can also adjust the background-size to make sure the image covers the section

3. Add the javascript into the outline that has the effect, most likely the home outline

parallaxEffect(0.05, 0, -100);

You can adjust the intensity of the effect by adjusting the 0.05 in the code. You can also adjust the positioning of the background on desktop and mobile so that you cant see any white space.

parallaxEffect(0.05, 50, -100);

the above code will shift the background on mobile down 50px and up 100px on desktop.

4. Add an overlay if you would like.

You can add this css to the first child element of the top-level section, i.e #g-expanded

.site-1-home #g-extension > div.g-container {
    background: rgba(var(--primary-rgb),.7); /* You can change the color here */
    padding: 3vw 5% 6vw 5%!important; /* adjust the padding here */
}

Finished....