CSS Sprite



HTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="StyleSheet" href="sprite.css" type="text/css">
</head>
<body  id="container">

<div class="sprite-cat"></div>
<div class="sprite-designmoo"></div>
<div class="sprite-designfloat"></div>
<div class="sprite-designbump"></li>

</body>
</html>


CSS file

.sprite-cat{ background-position: 0 0; width: 418px; height: 467px; } 
.sprite-designbump{ background-position: 0 -517px; width: 256px; height: 256px; } 
.sprite-designfloat{ background-position: 0 -823px; width: 256px; height: 256px; } 
.sprite-designmoo{ background-position: 0 -1129px; width: 256px; height: 256px; } 


#container {
   background: url(csg-4d2eb7c77d538.png) no-repeat top left;
}


Comments