Blend two backgrounds with two imgs

Question

how can I blend two backgrounds of parent and child element only with css:

<div style="background:url(img1.jpg);">
     <div style="background:url(img2.jpg); background-blend-mode:overlay;">
     </div>
</div>

and this doesn't work...

I would like to blend bg -> img2 with bg -> img1

Answer 1

You need to use mix-blend-mode:overlay, which blends each background with an alpha channel

<div style="width:50%;height:100%;">
  Your initial one:
  <div style='background-image:url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");height:5%'>
       <div style='background-image:url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-blend-mode:overlay;padding:25%;'>
       </div>
  </div>
  Correct Below:
  <div style='background-image:url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");height:5%'>
       <div style='background-image:url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png"); mix-blend-mode:overlay;padding:25%;'>
       </div>
  </div>
  Just "blue":
<div style='background-image:url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");padding:25%;height:5%'>
</div>
  Lastly, a test one using just "oriental-tiles":
<div style='background-image:url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");padding:25%;height:5%'>
       </div>
</div>