Image overlay in css

background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);

Overlay color on image css

footer#site-footer{  
  position:relative;
}

footer#site-footer:before {     /* use before property (pseudo-element)  */
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
}

Similar codes

1 vote224 views2 answers
How to middle fixed element
CSS
1 vote235 views1 answer
Css div went over top menu
CSS
0 vote231 views2 answers
Text-align transform
CSS
9 votes243 views3 answers
How to change another element on hover
CSS
1 vote223 views1 answer
Css put span on new line
CSS
2 votes222 views1 answer
How to add a black border around text css
CSS
1 vote247 views2 answers
Css clearfix for floats with display table and clear both
CSS
10 votes215 views3 answers
Css on click
CSS
0 vote200 views2 answers
Split pane border css ionic
CSS
10 votes220 views2 answers
Css list items next to each other
CSS