CSS Background Image Overlay

PROBLEM
How do I add an overlay to a background image using CSS only?
SOLUTION

The background property can accept several comma seperated images. Each image can have all the background properties but only the last one can have the “color” property.So, we can’t have the first image (overlay) have color property but we are allowed to have linear-gradient which will be our overlay!

Example (Our website footer background):

background: linear-gradient( rgba(7, 138, 162, 0.45), rgba(7, 138, 162, 0.45)), url(“https://freelanceworks.co.uk/wp-content/uploads/2021/08/footer-background.jpg”) center center /cover no-repeat #000; /* first image is overlay i.e. layer-1, second image is layer-0 */
}

 

CF7 FORM

    ELEMENTOR PRO FORM