<div class="container">
  <p>The following element's background images have been set using the <code>background</code> shorthand property. Change the values and their order to see if and how that changes the rendering of the background. If your browser supports multiple background images, you will see two background images: a bee and a flower.</p>
  <div class="element"></div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 90%;
}

.element {
  height: 400px;
  width: 100%;
  border: 5px solid black;
  background: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background/bee.png) 75% 30% / 150px 128px no-repeat, url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background/flower-bg.jpg) top left / cover no-repeat #006699;
}

/* fallback example for browsers that don't support multiple background image values */

.no-multiplebgs {
  background: #006699 url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background/flower-bg.jpg) cover no-repeat;
}