My goal is to implement a parallax background as a separator for a website. However, I'm facing an issue where the background image only occupies half of the intended size with a white border surrounding it. Despite my efforts, I can't pinpoint the cause in my code. I'm stuck in a loop where I either have the border or inner scroll bars within the div. All I need is for the background image to fill the entire space of the div for a smooth scrolling parallax effect in that section.
I've experimented with overflow:hidden and various height/width combinations, including calc(100vh * 2) to enlarge the image. However, it seems to affect the image within the container, giving the appearance of a sub-container without actually having one. I've delved into properties like transform, transform-origin, perspective, scale, and searched extensively on Google to no avail.
html, body {
height: 100%!important;
margin: 0px;
padding: 0px;
}
input, select, textarea {
box-shadow: inset 0 2px 4px hsla(0, 0%, 0%, 0.13);
}
/* Other CSS styles... */
Strictly speaking, it's not really a border issue, but more about the background image not filling the entire size of the containing DIV element.