This question has already been answered:

In general, the situation is this. There is a document body in which there is an image on which you want to impose a semi-transparent background, without using blocks. Is it possible in this case to implement it? If so, how?

body { font-family: 'ubuntu'; margin: 0; background: url(/images/back-1.jpg); Background-color: rgba (0, 0, 0, 0.5); background-size: cover;}

Reported as a duplicate member of the Spirit Community ♦ Nov. 7 '17 at 11:34 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    What you need is a property in css called background-blend-mode. Find more here.

     #div1 { width: 500px; height: 300px; border: 2px solid red; background: url('https://get.wallhere.com/photo/temple-sunset-city-cityscape-reflection-sky-skyline-skyscraper-evening-morning-tower-France-Paris-Eiffel-Tower-dusk-spire-tree-landmark-186143.jpg'), red; background-blend-mode: screen; background-size: cover; } 
     <div id="div1"></div>