<div class="container"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: block;
  background-size: 100%;
  height: 100%;
  width: 100%;
  background: 
    linear-gradient(purple 0%, red 90%), 
    linear-gradient(to right, purple 0%, yellow 90%), 
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.jpg') 30px,
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.jpg') 20px;
  background-blend-mode: screen, difference, lighten;
  background-size: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.