Need help, cannot apply skrollr on background-size:cover without white gap

[klaus101]

I'm a newbie. I know it's less an issue of skrollr, more a question of: is it possible to apply and how. I refer to: https://github.com/Prinzhorn/skrollr/issues/694 where a similar question had been told, an advice had been given but the topic stayed open.

Inside the body, beyond the header (menu) and above the footer, i need a background image that is exactly behaving as provided by background cover.

My structure:

.skrollr-content {
       background-position: center;
       margin: 0 auto;
       height: auto;
       width: 100%;
       padding: 100px 0;
   }

<section id="skrollr-body">
    <div class="skrollr-content"
             style="background: url('(my-bg-image)') no-repeat fixed center; background-size:cover;"
             data-bottom="opacity:1;background-position: 0px -100px;"
             data-center="opacity:1;background-position: 0px 0px;"
             data-top="opacity:1;background-position: 0px 50px;"

        <section id="firstsection">      
             (section content is following)

If the viewport shrinks in width, i get white space at the bottom of the image. That is explained in the link as above. With data-bottom -100px i go by intention beyond the visible area of the image as provided and clipped by "cover". "it might not overlap vertically at all". " If you want a guarantee, then style your elements accordingly. E.g."

<section style="width:100vw;height:100vh;overflow:hidden;">
    <div style="width:100%;height:100%;padding-top:100px;background:cover etc....">
        //Now you have guarantee that this element is exactly 100px higher than it's wrapper.
        //You can savely animate from "translateY(0px)" to "translateY(-100px)" without a gap.
    </div>
</section>

I tried to follow this hint but was not successful at all or i do not really understand. Is anybody able to give some more specific help how to use skrollr together with background:cover?