如何使具有视差效果的横幅图像没有背景图像？

Question

我想制作带有视差效果的横幅。标语应该是图像，而不是背景图像，它必须是图像。视差横幅图像应从上到下滚动并且图像应居中。更改菜单时，横幅不应该像下面的示例那样上升。我现在所做的是：

$(document).ready(function(){

$(window).scroll(function() {
  var height = $(window).scrollTop();

  if(height >= 50) {
    $('.banner').css('paddingTop', '30px');
    if($(window).width() < 991){
      $('.banner').css('paddingTop', '10px');
    } else {
      $('.banner').css('paddingTop', '30px');
    };
    $('.header-menu').css('position', 'fixed');
    $('.header-menu').css('width', '100%');
    $('.header-contact').css('visibility','hidden');
    $('.header-contact').css('position','fixed');
    $('.header-contact').css('z-index','-999');
    $('.header-menu').css('padding', '5px');
  } else if (height <= 49) {
    $('.banner').css('paddingTop', '');
    $('.header-menu').css('position', 'relative');
    $('.header-menu').css('padding', '');
    $('.header-menu').css('width', '');
    $('.header-contact').css('visibility','');
    $('.header-contact').css('position','');
    $('.header-contact').css('z-index','');
  }
});


  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $('.banner').each(function(index, elem) {
      var $elem = $(elem);
      $elem.find('img').css('top', scrollTop - $elem.offset().top);
    });
  };
  onScroll.apply(window);
  $(window).on('scroll', onScroll);

});

.header-contact {
    background-color: #000000;
    padding-top: 15px;
    padding-bottom: 15px;
}

.header-contact .header-socials a {
    display: inline-block;
    color: #ffffff;
}

.polylang {
    padding-right: 25px;
}

.polylang a {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}


.header-menu {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #fff;
    z-index: 999;
}

.header-menu .logo {
    padding-left: 25px; 
}

.content {
  height: 500px;
}

.paralax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.paralax-image img {
  position: absolute;
  height: 100vh;
  min-width:100%;
}




.banner {
  height: 60vh;
}

.banner-subpage .banner{
  height: 60vh;
  position: relative;
  overflow: hidden;
}

.banner-subpage img {
    max-width: 100%;
    height: 100vh;
    object-fit: cover;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<header>
    <div class="container-fluid">
        <div class="row align-items-center justify-content-end header-contact">
            <div class='header-contact-links'>
            </div>

            <div class="polylang">
                <a href="">DE</a>
                <a href="">EN</a>
            </div>
        </div>
        <div class="row align-items-center header-menu">
            <div class="col-12 logo">
                <a href="/">
                    <img src="https://c5.rgstatic.net/m/4671872220764/images/template/default/profile/profile_default_m.jpg" alt="">
                </a>
             </div>
        </div>
    </div>
</header>







<section class='banner-subpage'>
<div class='col-12 d-flex banner'>
<img src='https://support.squarespace.com/hc/en-us/article_attachments/211043968/index-page-banner.png' alt=''>
</div>
<section>
<div class='text'>
<img src='https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt=''>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tempus libero, non ullamcorper mi congue quis. Vestibulum in tincidunt odio, quis pharetra sem. Quisque in scelerisque lorem, in malesuada tortor. Suspendisse sodales eleifend dui a tincidunt. Nulla ullamcorper lacus vitae nulla facilisis, non bibendum ex tempus. Suspendisse id dui imperdiet, feugiat odio eget, cursus urna. Morbi sed ultricies magna. Nulla convallis et dolor eget sodales. Nullam tortor sem, rhoncus in tincidunt eget, porttitor eu quam. Cras luctus dolor dui, eu sodales libero convallis sit amet.</p>
<img src='https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt=''>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tempus libero, non ullamcorper mi congue quis. Vestibulum in tincidunt odio, quis pharetra sem. Quisque in scelerisque lorem, in malesuada tortor. Suspendisse sodales eleifend dui a tincidunt. Nulla ullamcorper lacus vitae nulla facilisis, non bibendum ex tempus. Suspendisse id dui imperdiet, feugiat odio eget, cursus urna. Morbi sed ultricies magna. Nulla convallis et dolor eget sodales. Nullam tortor sem, rhoncus in tincidunt eget, porttitor eu quam. Cras luctus dolor dui, eu sodales libero convallis sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tempus libero, non ullamcorper mi congue quis. Vestibulum in tincidunt odio, quis pharetra sem. Quisque in scelerisque lorem, in malesuada tortor. Suspendisse sodales eleifend dui a tincidunt. Nulla ullamcorper lacus vitae nulla facilisis, non bibendum ex tempus. Suspendisse id dui imperdiet, feugiat odio eget, cursus urna. Morbi sed ultricies magna. Nulla convallis et dolor eget sodales. Nullam tortor sem, rhoncus in tincidunt eget, porttitor eu quam. Cras luctus dolor dui, eu sodales libero convallis sit amet.</p>
<img src='https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt=''>
</div>