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: #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?