/CSS/How to have a background image with a color overlay

How to have a background image with a color overlay

/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

Source: css-tricks.com

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

0 vote152 views1 answer
Media screen use another css file
CSS
0 vote140 views1 answer
Relier css html
CSS
0 vote140 views1 answer
Space in css :before :after
CSS
0 vote140 views3 answers
Howto stop the screen from zooming in when I click on input tag on mible
CSS
9 votes125 views3 answers
Bootstrap blue outline button
CSS
57 votes145 views2 answers
Hegith specific css in media query
CSS
21 votes144 views2 answers
How to write css for input type text
CSS
1 vote180 views1 answer
Animated website
CSS
6 votes152 views3 answers
Position absolute horizontally center
CSS
6 votes167 views5 answers
Xss
CSS