overlay color on image css

1#hero{
2  background-image:url();
3  background-size:cover;
4  background-position:top center;
5  position:relative;
6}
7
8#hero::after{
9  content:'';
10  position:absolute;
11  left:0;
12  top:0;
13  height:100%;
14  width:100%;
15  background-color:black;
16  opacity:0.7;
17}

1footer#site-footer{  
2  position:relative;
3}
4
5footer#site-footer:before {     /* use before property (pseudo-element)  */
6    position: absolute;
7    content: '';
8    top: 0;
9    left: 0;
10    width: 100%;
11    height: 100%;
12    background: rgba(0,0,0,0.3);
13}

1html, body {
2  min-height: 100%;
3}
4
5body {
6  position: relative; /* needed if you position the pseudo-element absolutely */
7}
8
9body:after {
10  content: "";
11  display: block;
12  position: fixed; /* could also be absolute */ 
13  top: 0;
14  left: 0;
15  height: 100%;
16  width: 100%;
17  z-index: 10;
18  background-color: rgba(0,0,0,0.2);
19}
20

1html, body{
2  min-height: 100%;
3}
4body{
5  position: relative;
6}
7.overlay{
8  position: absolute;
9  top: 0;
10  left: 0;
11  width: 100%;
12  height: 100%;
13  z-index: 10;
14  background-color: rgba(0,0,0,0.5); /*dim the background*/
15}
16