One issue I'm facing is with the elements on my page acting strange when I zoom in and out.
Everything seems to be working fine except for a container div that should overlay a color over the image background. When I zoom in or switch to mobile view, the div does not extend all the way to the bottom of the page as it should. Instead, it only shows the background image at the bottom without the color overlay.
Here is the code snippet:
#container {
height:100%;
width:100%;
position: relative;
background-color: rgba(0,0,0,.5);
position: fixed;
}
body {
background-image: url(../img/d2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
HTML:
<div id="container">
<div class="block">
Content
</div>
</div>
I've already attempted using the 100% height property on the overlay, but it didn't resolve the issue. This problem becomes more apparent on mobile devices.