<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
margin-top: 15px;
width: 181px;
height: 163px;
}
#maleHappy{
background: url("frog.png") 0px 0px;
}
#maleSurprise{
background: url("frog.png") 416px 0px;
}
#maleSad{
background: url("frog.png") 181px 0px;
}
#femaleHappy{
background: url("frog.png") 0px 163px;
}
#femaleSurprise{
background: url("frog.png") 416px 163px;
}
#femaleSad{
background: url("frog.png") 181px 163px;
}
</style>
</head>
<body>
<h1>CSS Image Sprites Technique</h1>
<p>The images used in this example is from single source <a href="/frog.png" target="_blank">frog.png</a></p>
<h2>Male - Happy</h2>
<div id="maleHappy">
</div>
<h2>Male - Surprise</h2>
<div id="maleSurprise">
</div>
<h2>Male - Sad</h2>
<div id="maleSad">
</div>
<h2>Female - Happy</h2>
<div id="femaleHappy">
</div>
<h2>Female - Surprise</h2>
<div id="femaleSurprise">
</div>
<h2>Female - Sad</h2>
<div id="femaleSad">
</div>
</body>
</html>