Edit in JSFiddle

<a id="my-ad" >
      <div class="sprite sprite-clouds"></div>
      <div class="sprite sprite-beach"></div>
      <div class="sprite sprite-text"></div>
      <div class="sprite sprite-map-marker"></div>
      <div class="sprite sprite-map-marker-shadow"></div>
      <div class="sprite sprite-surfboard"></div>
  </a>

.sprite {
  background: url(http://sahud.mb.student.pens.ac.id/Spritesheet/spritesheet.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: 217px;
		height: 65px;
		background-position: -7% -34%;
		background-size: 127%;
	}

#my-ad {
          width: 600px;
          height: 200px;
          display: inline-block;
          background: linear-gradient(to bottom, #2C67D5, #73ACE4 40%);
          overflow: hidden;
          position: relative;
    }

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

.sprite-text {
      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .sprite-map-marker {
      position: absolute;
      top: 80px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .sprite-map-marker-shadow {
      position: absolute;
      top: 156px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .sprite-surfboard {
      position: absolute;
      top: 85px;
      right: 20px;
    }