CSS fullscreen background rgba overlay

Question

I have a fixed, fullscreen background image that I applied to the html's css, rather than the body. I have a black overlay with lowered opacity that IS in the body's css because it didn't work when i tried

background:rgba(0, 0, 0, 0.6), url(image.jpg);

I tried without the comma too but it didn't help. I've set height: 100% to the body with the colour overlay and it works, until I scroll down because it's using 100% of the screen height but no further.

The page I'm working on is a gallery with only 1 or 2 portrait/tall images which cause the problem when they stretch down past the screen and the overlay doesn't follow.

If there's no easy fix, could I add some conditional javascript code or something that'd extend the body's height when just those couple images are being viewed?

Answer 1

The best thing to do would be to create a div that sits on top of the page to create the overlay. See my example in the snippet below.

Basically the overlay div is fixed , so it stays in it's top: 0 even when you scroll. As it's height and width are 100%, it constantly fills the screen. You could now set your background on the body again, or where ever you want it.

 .overlay { height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; } .content { height: 1000px; background: green; } 

 <div class="overlay"></div> <div class="content">Text</div> <div class="content">Text</div>