I need this background

But copying a layer from the avocode, it turns out

What to do? How to add color to the bottom?

  • one
    use opacity: 0.5; - L. Vadim
  • it doesn't work like that ( - fff
  • @Ingrid I understand that you need the background color to blend with the picture, right? - Vadim Ovchinnikov
  • @Ingrid did you like my answer? If so, mark it as accepted (a green check mark to the left of the answer). If not, leave a comment, what exactly. - Vadim Ovchinnikov

3 answers 3

To mix the background color with the image, use the background-blend-mode CSS property.

Suppose there is a picture

Cat

Apply background-blend-mode: multiply; :

 .cat { width: 200px; height: 200px; background-image: url("https://i.stack.imgur.com/NkAMf.jpg"); background-color: pink; background-blend-mode: multiply; } 
 <div class="cat"> </div>

You can read more here .

The only thing: this solution is not supported by IE.

    As I understand it, the picture is transparent.

    So, the only thing to do is to specify the color in the background property at the same time as the link to the image:

     body { background: url('https://i.stack.imgur.com/Qb3KZ.png') no-repeat #000; }

      it helped me: z-index: 100; color: #000; .

      • And you can lay out the executable example, I want to see your method more clearly? - Vadim Ovchinnikov