<a id="mybanner" > <div class="sprite sprite-clouds"></div> <div class="sprite sprite-beach"></div> </a>
.sprite { background: url(http://eraalj.mb.student.pens.ac.id/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; } #mybanner { 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; }