<div class="container">
  <article class="artwork">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/artwork.jpg" alt="artwork">
  </article>
</div>

<p class="p">Demo by Maria Antonietta Perna. <a href="http://www.sitepoint.com/an-introduction-to-the-css-supports-rule-feature-queries" target="_blank">See article</a>.</p>

* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 80%;
  height: auto;
  background-color: #084F66;
  margin: 0 auto;
  padding: 0;
}

.artwork {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.noluminosity {
  mix-blend-mode: overlay;
}

.luminosity-blend {
  mix-blend-mode: luminosity;
}


.p {
  text-align: center;
  padding-top: 50px;
  font-size: 12px;
}

/* Using CSS.supports() the script tests the browser for the mix-blend-mode property with the value of luminosity and adds different classes to the target element accordingly. */

var init = function() {
  var test = CSS.supports('(mix-blend-mode: luminosity)'),
    targetElement = document.querySelector('img');
  if (test) {
    targetElement.classList.add('luminosity-blend');
  } else {
    targetElement.classList.add('noluminosity');
  }
};
window.addEventListener('DOMContentLoaded', init, false);