Positionning background-image - html

Question

I would like my image to scroll on the scroll in the leaning block, but once you get to a certain scroll level, you start to see white space appear.
This is the way I did it
.single-race__s2-container{
padding: 150px 0 300px;
background-size: cover;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
transform: skewY(-5deg);
margin-top: 150px;
margin-bottom: 1500px;
}
.single-race__s2-container:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display:block;
background-color: rgba(0,0,0, 0.5);
}
.single-race__s2-content{
transform: skewY(5deg);
}
<div class="single-race__s2">
<div class="single-race__s2-container"
style="background-image: url('https://i.picsum.photos/id/355/1440/1000.jpg?hmac=QRHj9Ni2849l3Nfu1nLwhURgp2ncK9AsIsQZuXRHfVc')">
<div class="single-race__s2-content o-wrapper">
<p>Lorem ipsum dolor</p>
<span>test</span>
</div>
</div>
</div>
am I doing it the right way or is there no solution?

Answer 1

You can try using the clip-path property. Create a container for your background image, that has the shape you want and load the image as a background-image. Apply position fixed to that container, set the height of the background-image to e.g. double the container height, and then use overflow: scroll
That way the background image is scrollable, without showing white space at the bottom.
HTML:
<div class="image-container">
<div class="image"></div>
</div>
CSS:
.image-container {
clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
width: 100%;
height: 300px;
position: fixed;
overflow: scroll;
}
.image {
background-image: url(https://i.picsum.photos/id/355/1440/1000.jpg?hmac=QRHj9Ni2849l3Nfu1nLwhURgp2ncK9AsIsQZuXRHfVc);
background-size: cover;
background-position: center;
width: 100%;
height: 600px;
}
Adjust the height as needed and make sure you prefix the clip-path for all standard browsers.