I'm looking to add a semi-transparent color overlay to my HTML section, but I'm facing an issue where it doesn't cover the entire section. Here's what I have so far:
#main {
padding-top: 50px;
padding-bottom: 50px;
background-image: url('https://cdn.pixabay.com/photo/2020/12/23/08/00/bow-lake-5854210_960_720.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
position: relative;
z-index: 1;
}
#main::before {
background-color: rgba(0, 0, 0, 0.80);
content: '';
height: 100%;
position: absolute;
width: 100%;
z-index: -1;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671309120914">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="main">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1>This is a text block</h1>
<p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
</div>
<div class="col-lg-6">
<h1>This is a text block</h1>
<p>This will only contain text which the user can edit from the admin via a text editor. Paddings, bg color/image are controlled via css file.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic ratione saepe quidem quo corrupti rem accusantium ex dolorem explicabo odio quae quos illo, voluptates maiores.</p>
</div>
</div>
</div>
</section>The issue here is that the color overlay isn't consistently displayed across all screen sizes due to the padding in #main. Adding margin-top to the before element helps on large screens, but not on smaller ones. How can I ensure the color overlay covers the entire section regardless of screen size and the presence of padding in #main?
Thanks