Different result when using mix-blend-mode and background-blend-mode

Question

I've noticed that when using mix-blend-mode the result is different than when using background-blend-mode even though you're using the same blending mode.

For example, compare the 2 results below:

I've copied in my setup and JSFiddles below:

HTML

<div class="background">
  <div class="overlay"></div>
</div>

CSS

.background{
  width:200px;
  height:200px;
  //background-color:green; //toggle depending on what you want to use
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.overlay{
  width:100%;
  height:100%;
  background-color:green; //toggle depending on what you want to use
  mix-blend-mode:soft-light;
}

JSFiddle

Using mix-blend-mode: https://jsfiddle.net/p8gkna87/

Using background-blend-mode: https://jsfiddle.net/p8gkna87/1/

Some background information

I'm currently replicating a photoshop design which uses the soft-light blending mode and at the same time also uses an opacity of 51%. So it wouldn't be able to use background-blend-mode as the opacity cannot be applied to the same object.

Answer 1

background-blend-mode blends with its background-image and its background-color.

mix-blend-mode blends with its backdrop, the part what is behind itself, and its background-color.

Here is an article describing mix-blend-mode quite well:

• http://alistapart.com/article/blending-modes-demystified

Put in another way, and in your case, with your mix-blend-mode you blend a green color on top of the image, with your background-blend-mode you do the opposite.

So by having the same layer order, both blend-modes look the same

.background,
.background2{
  display: inline-block;
}

.background{
  width:200px;
  height:200px;
  background-color:green;
}
.overlay{
  width:100%;
  height:100%;
  mix-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.background2{
  width:200px;
  height:200px;
  background-color:green;
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

<div class="background">
  <div class="overlay"></div>
</div>

<div class="background2">
</div>

Answer 2

You have already a good answer from LGSon.

Just to clarify it a little bit further:

The layers that you have here are, from botton to top:

1. background element background-color
2. background element image
3. overlay element background-color

The background-blendmode applies inside the background element, in this case layer 2 over layer 1

The mix-blend-mode applies element 3 over the result of 1 + 2

So, if only one of them is efffective, the order is the inverse