After researching various SO questions and answers, as well as examining different JSFiddle and Codepen examples, I have yet to find the solution I am looking for...
Here is a sample fiddle of my current issue:
https://jsfiddle.net/ts4t13hn/3/
Below is the CSS class I am currently working with:
.dark-layer{
background-color: rgba(0,0,0,.6);
height:100%;
width:100%;
}The objective is for the 'dark-layer' CSS class to cover 100% of the screen, regardless of whether the content fits on the page or requires scrolling down to view the entire page.
In the provided fiddle, the content does not overflow the initial screen, resulting in the layer not covering the entire screen. To address this, I discovered that adding the position:absolute property solves the issue, as shown in this updated fiddle: https://jsfiddle.net/ts4t13hn/4/
However, when additional content is added to generate an overflow, the layer fails to fill the screen as demonstrated in this fiddle: https://jsfiddle.net/ts4t13hn/5/
Some sources suggest using background-attachment:fixed to address this issue, but this did not yield any significant changes in the fiddle or my project.
When the CSS is set as in the initial example (without position:absolute;), the desired outcome is achieved only when the content exceeds the initial screen size.
The question: Is there a way to set the dark-layer class to have 100% height and remain fixed to the viewport, ensuring it always covers the background image (similar to how the background image on the body element functions)?