In this Tutorial I will show you how to add a scrolling Parallax background to sections of your site. I will also show you how to use Flexbox to center the section’s content.
To make this effect possible we need to use jQuery and parallax.js, remember to call jQuery first before any other scripts in your header.
For my example I setup the sections to alternate backgrounds to show you the effect more clearly. Once you have your js in place all you need to do is give your section class=”parallax-window” with data-parallax=”scroll” and add data-image-src=”you-image.jpg” with your background image.
See the Pen Parallax Background with Centered Content by Christopher Cook (@cccamuseme) on CodePen.