In the body tag, you need to insert an image on the background and fill it with a transparent color over it. Used tags

body { background-image: url(../img/mnogoetazhka-%5B1600x1200%5D-%5B32918977%5D.jpg); background-position: top; background-repeat: no-repeat; background-size: cover; background-color: rgba( 255, 0, 0, 0.5); }

but the color when loading the page is under the picture, how to prioritize them?

    2 answers 2

    Try adding the background-blend-mode property. (Does not work in IE, Edge and Opera Mini .)

    The background-blend-mode property describes how the background image of an element should overlap with the backgrounds of other elements.

    Here are cribs in Russian and in English . Little is translated into Russian, but in the example there you can try different blending effects.

     body { background-blend-mode: multiply; background-image: url(//i.stack.imgur.com/1ffAS.jpg); background-position: top; background-repeat: no-repeat; background-size: cover; background-color: rgba(255, 0, 0, 0.5); } 

       body { position: reletive; min-height: 620px; background-image: url(../img/mnogoetazhka-%5B1600x1200%5D-%5B32918977%5D.jpg); } body::before { conten:''; width: 100%; height: 100%; left: 0; top: 0; position: absolute; background-color: rgba( 255, 0, 0, 0.5); }