CODEWITHSUNDEEP
cssgoogle-chromebackground-blend-mode
eruina
eruina

Reputation: 873

Blend mode in Chrome not applying properly

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.

Upvotes: 1

Views: 1456

Answers (1)

vals
vals

Reputation: 64214

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>

Upvotes: 3

Related Questions