Prak8

HTML

<a id="my-ad" href="http://listhyakumalaa.blogspot.co.id/2016/05/praktikum-8-membuat-ads-banner.html">
  <div class="sprite sprite-clouds"></div>
  <div class="sprite sprite-beach"></div>
</a>

CSS

.sprite {
  background: url(http://listhyakumala.mb.student.pens.ac.id/TeknologiWeb/spritesheet1.png);
  display: inline-block;
}

.sprite.sprite-beach {
  width: 600px;
  height: 200px;
}

.sprite.sprite-clouds {
  width: 600px;
  height: 135px;
  background-position: 0 -216px;
}

.sprite.sprite-text {
  width: 448px;
  height: 36px;
  background-position: 0 -368px;
}

.sprite.sprite-map-marker {
  width: 53px;
  height: 83px;
  background-position: -464px -366px;
}

.sprite.sprite-map-marker-shadow {
  width: 27px;
  height: 11px;
  background-position: -562px -388px;
}

.sprite.sprite-surfboard {
  width: 462px;
  height: 144px;
  background-position: -598px -413px;
}

#my-ad {
  width: 600px;
  height: 200px;
  display: inline-block;
  background-color: #2486d6;
  overflow: hidden;
  position: relative;
}

.sprite-clouds {
  position: absolute;
  top: 0;
  left: 0;
}