Text overflows at the bottom of parallax image

[kpagcha]

I am trying to make a parallax block with a background image and some text, but when the text is at the bottom of the div, it "overflows" it and appears outside of the image when you scroll too far.

The same happens with a semi opaque overlay I'm using to darken the background. Here's a screenshot:

And here's my code:

<div class="wrapper">
    <img src="background.jpg" class="rellax-img" data-rellax-speed="2">
    <h1>Heading</h1>
</div>

CSS:

.wrapper {
    height: 100vh;
    overflow-y: hidden;
    width: 100%;
    position: relative;
}

.wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
}

.rellax-img {
    width: 100%;
    height: 100%;
}

JS:

const rellax = new Rellax('.rellax-img');

How can I have both elements inside the image while keeping the parallax effect?

[lear2000]

me too.. anyone?

[kufnakrees]

Any updates on this? Can't figure this out either...