I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following code in the body's CSS:
background:rgba(0, 0, 0, 0.6), url(image.jpg);
Despite trying variations such as removing the comma from the code, I faced difficulty in getting it to work properly. Setting height: 100%
for the body did solve the problem up to a certain point. However, when scrolling down, the overlay only covered up to the screen height and didn't extend further.
The specific page I'm working on is a gallery that mainly consists of one or two tall portrait images. The issue arises when these images stretch beyond the screen, causing the overlay not to follow.
If there isn't a simple solution, I was wondering if implementing conditional JavaScript code could help dynamically adjust the body's height when viewing those particular images?