title: background-blend-mode alternative for internet explorer
body: <p>I'm using background-blend-mode on my page but IE doesn't support it. </p>
  
  <p>How can I solve this?</p>
  
  <p>My page on Chrome/Firefox:
  <a href="https://i.stack.imgur.com/BlWFa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BlWFa.png" alt="enter image description here"></a></p>
  
  <p>My page on IE:
  <a href="https://i.stack.imgur.com/Qedrt.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Qedrt.jpg" alt="enter image description here"></a></p>
  
  <p>My CSS:</p>
  
  <pre><code>div#background-image-new {
  background-image: url("/img/profile_pictures/bg.jpg");
  /* z-index: -2; */
  background-size: cover;
  background-color: rgba(6, 18, 53, 0.75);
  background-blend-mode: overlay;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
  }
  </code></pre>