<!-- The HTML below is added by Gutenberg Editor in Wordpress 5.0 -->
<section>
  <!-- widget area for above single content -->
  <div class="wp-block-cover-image has-background-dim" style="background-image:url(https://leap-in.com/wp-content/uploads/2018/06/mountain.jpg)">
    <p class="wp-block-cover-image-text"><strong>Parallax 1</strong></p>
  </div>

  <div class="wp-block-cover-image has-background-dim" style="background-image:url(https://leap-in.com/wp-content/uploads/2018/07/beach-coast-idyllic-157398.jpg)">
    <p class="wp-block-cover-image-text"><strong>Parallax 2</strong></p>
  </div>

  <div class="wp-block-cover-image has-background-dim" style="background-image:url(https://leap-in.com/wp-content/uploads/2018/07/beach-exotic-holiday-248797.jpg)">
    <p class="wp-block-cover-image-text"><strong>Parallax 3</strong></p>
  </div>

</section>
/**
DO NOT COPY THIS SECTION *SEE AND COPY THE END OF CSS PANEL

 The css below is added by Gutenberg  Editor in Wordpress 5.0.

 */
.wp-block-cover-image {
  position: relative;
  background-size: cover;
  background-position: 50%;
  min-height: 430px;
  width: 100%;
  margin: 0 0 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image h2 {
  color: #fff;
  font-size: 2em;
  line-height: 1.25;
  z-index: 1;
  margin-bottom: 0;
  max-width: 610px;
  padding: 14px;
  text-align: center;
}

.wp-block-cover-image.has-background-dim:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
/*
DO NOT COPY SECTION END
 */

/**
 COPY HERE!
 Add This to make background image parallax.
*/
.wp-block-cover-image {
  background-attachment: fixed;
  background-position: 50% 0;
}
/**
COPY HERE
*/
(function($) {
  /** change value here to adjust parallax level */
  var parallax = -0.5;

  var $bg_images = $(".wp-block-cover-image");
  var offset_tops = [];
  $bg_images.each(function(i, el) {
    offset_tops.push($(el).offset().top);
  });

  $(window).scroll(function() {
    var dy = $(this).scrollTop();
    $bg_images.each(function(i, el) {
      var ot = offset_tops[i];
      $(el).css("background-position", "50% " + (dy - ot) * parallax + "px");
    });
  });
})(jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js