<header class="header">
  <div class="header__title">
    <h1>
      <code>url()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/url">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=mdn-css_properties_content_url">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, the following <code>div</code> element is using the <code>url()</code> CSS function to give it a background image of a patient water buffalo being groomed by some small birds:
    </p>
    <div class="example__url">
    </div>
  </div>

  <aside>
    <p>
      <small>Photo by <a href="https://unsplash.com/photos/UpM1Agq8S-w">Githinji Wanjohi</a> on <a href="https://unsplash.com/">Unsplash</a>.</small>
    </p>
  </aside>
</main>

// Demo
.example__url {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/githinji-wanjohi-1094710-unsplash.jpg');
}


// Pen Setup
.example__url {
  background-size: cover;
  border: 2px solid var(--color-topaz);
  margin-top: var(--size-epsilon);
  padding-top: calc(9 / 12 * 100%); // Preserves the image's aspect ratio
}