Add a dark overlay to background image

Question

I've looked at several SO posts about this: I want to darken the current background image by adding an overlay.

#header1 {
  background: url("http://lorempixel.com/image_output/cats-q-c-640-480-10.jpg");
  background-position:center center;
  position: relative;
  background-size: cover;
  padding-bottom:5em;
}
.overlay {
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

<div class="header">
  <div class="overlay">
    <div class="jumbotron" id="header1">
      <h1>Hello</h1>
    </div>
  </div>
</div>

Maybe I'm not understanding how to use z-index, or maybe I'm missing something here. The darker background used for tinting isn't showing up. Any pointers?

Answer 1

Use Linear gradient

to darken the background refer to this codepen and this link

<div class="bg-img"></div>

.bg-img {
  width: 100%;
  height: 100%;
  background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
        opacity: .6; 
  }
}

Answer 2

#header1 {
    background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/
    
    
    background-size: cover;
 
  
}

h1 {
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding-top: 10px;
    padding-bottom: 100px;
    padding-left: 20px;
  padding-right: 20px;
}

<div class="header">
    <div class="overlay">
        <div class="jumbotron" id="header1">
            <h1>Hello</h1>
        </div>
    </div>
</div>

As intended the h1 acts as an extra visual layer and its padding covers the #header1.

A second solution would be to add the original background image to .header and have the styles from h1 given to #overlay and with a bit of tweaking that should also do the trick.

And yet another possible solution(similar to the second one) you can add the background-image to overlay and have the h1 styles from the example I gave to #header1 or .jumbotron

In addition to the first solution, you should be able to add extra layer by adding a background-color: to overlay. I'm not sure how it will effect the background exactly but from what I'm guessing it should just add an extra layer of color.

Here is a personal example where I used this technique.

Example