how to have a background image with a color overlay

1/* Working method */
2.tinted-image {
3  background: 
4    /* top, transparent red, faked with gradient */ 
5    linear-gradient(
6      rgba(255, 0, 0, 0.45), 
7      rgba(255, 0, 0, 0.45)
8    ),
9    /* bottom, image */
10    url(image.jpg);
11}

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}