I'm currently working on a static website that features several parallax images dividing each section. However, I've run into an issue as I continue to add more sections and parallax images. Some of the images at the bottom of the website are shifting out of the frame. This means that the images are initially positioned incorrectly, causing them to slide out of their designated div or frame when scrolling, leaving empty space beneath the image.
This problem seems to be isolated to images near the bottom of the website. Additionally, the lower the image is positioned, the more noticeable the issue becomes.
Below is the code I'm using to insert the parallax images:
<div class="section parallax light-translucent-bg parallax-bg-5">
<div class="container">
<div class="call-to-action">
</div>
</div>
</div>
And here is the CSS for this specific div:
.parallax-bg-5 {
background: url("../images/parallax-bg-5.jpg") 50% 0px no-repeat;
}