Prevent overlay div from scrolling with page - html

Question

I have a div which is horizontally and vertically centred in the viewport. So I know the content will always be accessible, I allow the page to scroll when the content is taller than the viewport.
This appears to work fine, however, I am using a background-image on the div with an overlay on the :before pseudo-element to fade out the background. At first the background scroll, which I was able to resolve with background-attachment: fixed. Now the problem I have is that the overlay div scrolls up along with the page, so the area 'below the fold' doesn't now have a darkened background.
I know this is down to the position: absolute but when I change the position to fixed the desired effect is achieved but the overlay then covers the vertical scrollbar - is there a way around this?
I know I could use an image already darkened but this is markup that is used elsewhere and is being reused, so I'd like to find a CSS solution if possible.
Thanks in advance!
Code example attached + a CodePen version (https://codepen.io/moy/pen/xxbwvdL) depending on your preference. :)
html,
body {
margin: 0;
padding: 0;
}
h1,
p {
margin: 0 0 30px;
padding: 0;
}
.masthead {
background-color: rgb(0,0,0);
background-image: url("https://www.fillmurray.com/1920/1080");
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
color: white;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
overflow: hidden;
overflow-y: auto;
padding: 60px 0 30px;
position: relative;
width: 100%;
}
.masthead:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
.wrap {
margin: auto;
padding: 0 30px;
z-index: 12;
max-width: 900px;
}
.masthead--fullbleed {
height: 100vh;
overflow-y: auto;
}
<section class="masthead masthead--fullbleed">
<div class="wrap wrap--narrow align-center">
<div class="hgroup">
<h1 class="hgroup__title">Title here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>

Answer 1

Urgh, why is it when you've been stuck on something then you post and instantly think of a solution (I think).
So basically, I changed height: 100vh to min-height: 100vh That seems to do the trick unless anyone can spot a problem with it. Attached snippet to reflect this.
You can tell I haven't coded for a year+ I guess :/
html,
body {
margin: 0;
padding: 0;
}
h1,
p {
margin: 0 0 30px;
padding: 0;
}
.masthead {
background-color: rgb(0,0,0);
background-image: url("https://www.fillmurray.com/1920/1080");
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
color: white;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
overflow: hidden;
overflow-y: auto;
padding: 60px 0 30px;
position: relative;
width: 100%;
}
.masthead:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
.wrap {
margin: auto;
padding: 0 30px;
z-index: 12;
max-width: 900px;
}
.masthead--fullbleed {
min-height: 100vh;
overflow-y: auto;
}
<section class="masthead masthead--fullbleed">
<div class="wrap wrap--narrow align-center">
<div class="hgroup">
<h1 class="hgroup__title">Title here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>

Answer 2

try changing:
.masthead--fullbleed {
height: 100vh;
overflow-y: auto;
}
to
.masthead--fullbleed {
overflow-y: auto;
}
EDIT
Alternative is to attach the dark overlay to the body
.body:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}