<div id="container">
  <div id="element"><h3>Множественные фоны</h3></div>
</div>

@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");

/* --- Стиль квадратного элемента --- */
#element {
  background-blend-mode: normal, screen;
  background-position: center;
  background-repeat: round, no-repeat, no-repeat;
  background-size: auto, cover, cover;
  background-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.5"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E'), linear-gradient(to right, #e66465, #9198e5), url('https://images.unsplash.com/photo-1540056145750-91179d279b66?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');
  width: 90%;
  height: 360px;
  margin: 24px auto;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  resize: both;
  overflow: auto;
}

/* --- Стиль остальных элементов --- */
body {
  font-family: Roboto;
  background-color: #f5f5f5;
  text-align: center;
}

#container {
  margin-top: 24px;
}

h3 {
  font-size: 24px;
  font-weight: lighter;
  text-transform: uppercase;
  color: black;
  padding: 16px;
  margin: 24px;
  background-color: rgba(255,255,255,.5);
 }

jQuery(document).ready(function($){
  $('[name="mode"]').on('change', function(){
    $('#element').css({
      'background-blend-mode': $(this).val()
    })
  });
});