<div class="container">
  <p>
    The following element has two background images: the one in the back with the sky and flower, and the bee.
  </p>
  <div class="el"></div>
  <p>
    The following element has the following small background image: <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-image/pattern.png" alt="black pattern">. The <code>background-repeat</code> property is used to repeat it to fill the whole element's background area.
  </p>
  <div class="patterned"></div>
  <p>Background pattern from <a href="http://subtlepatterns.com/tree-bark/">Subtle Patterns</a></p>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

.el {
  height: 400px;
  width: 100%;
  /* we want the bee to be on top of the sky+flower background, so we list it first */

  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-image/bee.png), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-image/flower-bg.jpg);
  background-repeat: no-repeat;
}

.patterned {
  width: 100%;
  height: 300px;
  background: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-image/pattern.png);
  background-repeat: repeat;
}