CODEWITHSUNDEEP
htmlcssbackgroundoverlayfullscreen
Mackd
Mackd

Reputation: 1

CSS fullscreen background rgba overlay

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?

Upvotes: 0

Views: 1779

Answers (1)

CalvT
CalvT

Reputation: 3213

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>

Upvotes: 1

Related Questions