I've tried multiple suggestions without success so far. In my website, I have a main section with white background centered on the page. It stretches nicely to the bottom using flex. See image:
https://i.sstatic.net/RmJ2o.png
However, there's a specific section with lots of content where scrolling brings a white background into view instead of keeping the image fixed:
https://i.sstatic.net/cxpcl.png
I managed to fix this issue, but it breaks the layout for other pages (see below). Here is the current HTML and CSS code (also utilizing Bootstrap):
<body>
<div class="bg flex-column d-flex">
<header class="container">...</header>
<div class="container" flex-grow-1 flex-shrink-0">
<main role="main" class="h-100">
...
</main>
</div>
</div>
</body>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("../images/bg.jpg");
height: 100%;
background-position: center;
background-repeat: repeat-y;
background-size: cover;
background-attachment: fixed;
}
The "fix"
By modifying the CSS as follows:
body, html {
min-height: 100%; /* ! */
margin: 0;
}
The scrolling white background issue has been resolved. However, now other pages are affected because the div no longer stretches to the bottom of the page:
https://i.sstatic.net/J1ZGp.png
Any assistance would be greatly appreciated.