Edit in JSFiddle

<a id="my-ad">
    <div class="sprite sprite-clouds"></div>
    <div class="sprite sprite-beach"></div>
</a>

 #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 {
	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: 462px;
		height: 144px;
		background-position: -598px -413px;
}