There are many libraries to add parallax effects, some of them have many features, and other are quite "big".
This one is simple, easy to add and very light as the file is only 1.85 KB.

Of course if you want more options, you can use any other parallax libraries but if you only want a simple background effect, this one works like a charm.

Step 1

Download the package : https://github.com/marrio-h/universal-parallax
Then upload and enqueue the file universal-parallax.min.js :

wp_enqueue_script( 'universal-parallax-js', plugin_dir_url( __FILE__ ) . 'assets/js/universal-parallax.min.js', '','', true );

[ see HOWTO to learn how to add custom files ]

Step 2

Add these CSS in a Code Block :

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}

.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	width: 100%;

	/* BG behaviour */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

Step 3

And for the Javascript :

new universalParallax().init({
	speed: 6
});

Step 4

Now that everything is ready, we can add our background image.

Add a new Section, change the height, add some elements inside (Headings, images...), just like a normal section.

Add a Div inside this section and add the class "parallax" to it :

Finally add a background image to the Div (no need to change any other settings) :

The structure looks like this :

That's it.

If it looks messy in the backend, just save and reload the page.

For more info, don't forget to check the official page : https://github.com/marrio-h/universal-parallax