CodePen

HTML

            
              <h2>Live demo:</h2>

<div class="demo">
  <div class="image-1">
  </div>

  <div class="image-2">
  </div>

  <div class="bg-blend">
  </div>
</div>

<h2>Should look like:</h2>

<img class="screencap" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blend-example-2.png">
            
          
!

CSS

            
              .bg-blend {
  background-image: 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/grid.png),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg);
  background-blend-mode: multiply;
  background-size: 16px 16px, cover;
}

.image-2 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg);
  background-size: cover;
}

.image-1 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/grid.png);
  background-size: 16px 16px;
}

body {
  padding: 20px;
}
.demo > div {
  float: left;
  width: 200px;
  height: 200px;
}
.demo {
  overflow: hidden;
}
.screencap {
  width: 600px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................