<section id="grid"></section>
<section id="circles"></section>

body { 
  margin: 0;
  font-size: 0;
}
svg {
  display: none;
}
section { 
  display: inline-block; 
  width: 50%;
  padding-top: 42%;  
}
section#grid {
	background-image: 
	  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/checkerboard.svg),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/grace-kelly.jpg);
  background-size: 100px 100px, cover;
  background-blend-mode: overlay;
}
section#circles {
	background-image: 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/kelly-brook-as-gilda.jpg),
	  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circle-grid.svg);
  background-size: cover, 100px 100px;
  background-blend-mode: multiply;
}