Add a dark overlay to background image - html

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

Answer 3

#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/,
box-shadow: "0px 4px 4px 0px #00000040,inset 0 0 0 1000px rgba(0,0,0,.5)"
}
You don't need the overlay if you add a box shadow. The inner box-shadows work as an overlay. You can adjust the opacity by changing the .5 up or down.

Answer 4

The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
for your answer, you can visit css-tricks

Answer 5

I guess you would like to completely hide the background image, Then you need to set the value of alpha to 1 in rgba(0,0,0,1)
0.7 defines the transparency level you need the particular element to be shown.
below link explain concept of overlaying with very good examples
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Answer 6

You can also use this CSS:
filter: brightness(50%);