0

Ok so I have read numerous SO questions and answers about this one, looked at various JSFiddle and Codepen examples but don't seem to find the solution I want...

Here is an example fiddle of what I'm experiencing:

https://jsfiddle.net/ts4t13hn/3/

Here is the CSS class I'm working with:

.dark-layer{
  background-color: rgba(0,0,0,.6);
  height:100%;
  width:100%;
}

Basically, I want the CSS class 'dark-layer' to fill 100% of the screen (whether the content fits onto the page or there is more and one has to scroll down to see the rest).

In the fiddle example above, there isn't enough content to require the user to scroll down so the layer doesn't cover 100% of the screen. The solution to this I found was to give the class position:absolute - working example here: https://jsfiddle.net/ts4t13hn/4/

However, if I now add some more content to cause an overflow, the layer doesn't continue to fill the screen as demonstrated here: https://jsfiddle.net/ts4t13hn/5/

Various pieces of information suggest setting background-attachment:fixed but I tried this in the fiddle and my project and I see no difference.

If I leave my CSS as in the first example (i.e. no position:absolute;), I get the desired result only if the content exceeds the initial screen.

The question: Is there a way to give the dark-layer class 100% height and cause it to be fixed to the viewport so that it is always covering the background image (similar to how to how the background image on the body element works)

Seb W
  • 521
  • 2
  • 6
  • 18

3 Answers3

1

Don't wrap everything with the layer, just put it in there empty. 

<div class="dark-layer"></div>

Then set it to fixed position.

.dark-layer {
    position: fixed;


html {
  height: 100%
}

body {
  background-image: url(https://images.pexels.com/photos/770151/pexels-photo-770151.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding: 0 auto;
  margin: 0 auto;
}

.dark-layer {
  background-color: rgba(0, 0, 0, .6);
  height: 100%;
  width: 100%;
  position: fixed;
}
<html>

<body>

  <head>
  </head>

  <div class="dark-layer"></div>
  <div class="container">
    <nav class="navbar navbar-expand-lg">
      <div class="container">
        <a class="navbar-brand text-light" href="#">
                        Logo
                    </a>

        <button class="navbar-toggler collapsed text-light" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    Expand
                    </button>

        <div class="navbar-collapse collapse mr-auto" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a href="#" class="nav-link text-light">Link 1</a></li>
            <li class="nav-item"><a href="#" class="nav-link text-light">Link 2</a></li>
            <li class="nav-item"><a href="#" class="nav-link text-light">Link 3</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>


  <div>
    <div class="container">
      <h1>
        Some header
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend tincidunt tellus, at ultrices erat bibendum a. Donec eget tortor tempus, dapibus eros fringilla, ultricies quam. Vivamus quis lorem leo. Pellentesque quis consequat enim. Pellentesque
        habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis odio mi, mattis nec venenatis tincidunt, egestas et ex. Nam dapibus egestas lacus, in vulputate lacus rutrum ac. Aliquam sollicitudin lacus in magna suscipit,
        quis imperdiet eros tristique. Nulla tristique eros eu nulla congue consequat. Proin suscipit dolor bibendum est convallis commodo. Mauris in dolor vel ipsum hendrerit convallis porta vel ipsum. Duis scelerisque bibendum ante vitae vehicula. Donec
        venenatis, orci eget dignissim porta, odio justo rhoncus sapien, sit amet tristique turpis eros a lectus.
      </p>
    </div>
    <h6 class="footer fixed-bottom text-center text-light">Some Footer</h6>
  </div>
</body>

</html>
JasonB
  • 6,243
  • 2
  • 17
  • 27
0

IF what you're trying to do is set a semi-trasnparent dark background over the background image, you don't need the "dark layer" at all, just set stacking backgrounds on the body element and get rid of everything else

body {
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
 url("https://images.pexels.com/photos/770151/pexels-photo-770151.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 0 auto;
    margin: 0 auto;
}

Setting the solid color as a gradient is somewhat hacky, but for whatever reason we can't really set a solid color stacking over images. Here's a little explanation about it.

You can also further improve that code by setting all those others background properties in the shorthand declaration, I just tried to change as little as possible from your code

Facundo Corradini
  • 3,825
  • 9
  • 24
  • Yep, that's what I'm after. The problem is that in my project (not in the fiddle I posted) I have the background image changing according to some timer and if I make no change other than this, as soon as the image changes the semi-transparent layer goes. Not an issue but I will need to incorporate this method into the function I have. Thanks for your answer – Seb W Jan 07 '18 at 15:30
  • You're welcome, hope it helps. upvoting would be greatly appreciated ;) – Facundo Corradini Jan 07 '18 at 15:37
-1

In CSS do this:

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

The z-index: -1 means the image will be moved BACK one layer. To move ahead a layer try: z-index: 1;

Kirk Beard
  • 9,569
  • 12
  • 43
  • 47
matthew gage
  • 36
  • 4