Was working towards a repeated background that has a spotlight and decided to use blend modes to achieve this.
However, it appears as if blend modes did not apply in Chrome.
Replicated here: http://jsfiddle.net/pptn4f5v/7/
body {
background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), url("https://dl.dropboxusercontent.com/u/10686242/background-blend%20-%20Copy.png") #030303;
background-repeat: repeat, no-repeat;
background-blend-mode: multiply, normal;
background-size: auto, contain;
}
Is this a limitation of Chrome? This works perfect in Firefox.
Probably it is a bug in Chrome
However, you can get this effect more easily, and it will work ok in both browsers
Use only 2 backgrounds, and create the spot with a gradient
.test {
background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"),
radial-gradient(circle at 250px 100px, transparent 50px, #606060 150px);
background-blend-mode: darken;
height: 400px;
}
<div class="test"></div>