CSS Sprite: What is it and how to do it

arp14 CSS, Tutorial Tags: , , , , , 1

CSS Sprite is a method not only to reduce HTTP Requests but also file sizes and preload images at once to optimize website. Basically,  CSS Sprite is the technique of taking out multiple images and combined them into one single image then selecting the image via CSS as background by using background property and position each part by background-position property. In this tutorial, we will learn CSS Sprite from the beginning.

Basics of CSS Sprite:

Responsible Files for CSS Sprite Tutorial:
  • spriting_basics.html
  • spriting_basics.css
  • image.png
  • image_h.png
  • image_v.png
spriting_basics.html
<html>
	<head>
		<title>CSS Sprite: What is it and how to do it - Basics</title>
		<link type="text/css" rel="stylesheet" href="spriting_basics.css" />
	</head>
	<body>
		<h1>Sprite Individually</h1>
		<img src="image.png" /><hr />
		<a href="#" title="youtube"><div class="one"></div></a>
		<a href="#" title="facebook"><div class="two"></div></a>
		<a href="#" title="delicious"><div class="three"></div></a>
	</body>
</html>
spriting_basics.css

 

div {float: left;}
img {float: right;}

div.one {
	background-image: url(image.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
}
div.one:hover {background-position: -200px 0;}

div.two {
	background-image: url(image.png);
	background-position: -100px 0;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
}
div.two:hover {background-position: -300px 0;}

div.three {
	background-image: url(image.png);
	background-position: -100px -200px;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
}
div.three:hover {background-position: -300px -200px;}
Explanation of CSS Sprite:

At first we have selected the each DIVs by its class name and then set a background image by using background-image property. Then we set the background position value negatively using background-position property. It accepts two values – first one is for X-axis and second one is for Y-axis. Then set background-repeat property value to no-repeat. And also set fixed width and height of DIVs. And it’s actually done.

Clean up the codes using shorthand form of background property:

Responsible Files:
  • sprite_cleaned.html
  • sprite_cleaned.css
  • image.png
  • image_h.png
  • image_v.png
sprite_cleaned.html
<html>
	<head>
		<title>CSS Sprite: What is it and how to do it - Cleaned up</title>
		<link type="text/css" rel="stylesheet" href="sprite_cleaned.css" />
	</head>
	<body>
		<h1>Sprite From Horizontally</h1>
		<img src="image_h.png" /><hr />
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div><br />

		<h1>Sprite From Vertically</h1>
		<img src="image_v.png" /><hr />
		<div class="four"></div>
		<div class="five"></div>
		<div class="six"></div><br /><br />

		<h1>Sprite From Both Horizontally & Vertically</h1>
		<img src="image.png" /><hr />
		<a href="#" title="youtube"><div class="seven"></div></a>
		<a href="#" title="delicious"><div class="eight"></div></a>
	</body>
</html>
sprite_cleaned.css
div {float: left;}
img {float: right;}
/* Sprite Horizontally */
div.one, div.two, div.three {
	background: url(image_h.png) no-repeat 0 0;
	width: 16px;
	height: 16px;
	margin-bottom: 10px;
}
div.two { background-position: -16px 0;	}
div.three {	background-position: -32px 0;}

/* Sprite Vertically */
div.four, div.five, div.six {
	background: url(image_v.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
	margin-bottom: 10px;
}
div.five { background-position: 0 -32px;}
div.six { background-position: 0 -64px;}

/* Sprite From Both Horizontally & Vertically */
div.seven, div.eight, div.nine, div.ten { 
	background: url(image.png) no-repeat 0 0;
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
}
div.eight { background-position: -100px -200px;}
a div.seven:hover { background-position: -200 0; }
a div.eight:hover { background-position: -300 -200px; }
Explanation:

The core concept is same. This time we selected all DIVs and took common properties and values of all DIVs like

background: url(image_v.png) no-repeat 0 0;
width: 32px;
height: 32px;
margin-bottom: 10px;

and set them up together for all DIVs. Then we select each DIV individually and set background-position property values as needed.

Shorthand property for background – for more clean up:
Instead of using:
background-image: url(image.png);
background-position: -100px -200px;
background-repeat: no-repeat;
You can use:
background: url(images/three-icons.gif) no-repeat 0 0;
Measuring Images:

Measuring images is a very important work to make them shown perfectly. Suppose we have this image

and we want to delicious blue active icon to be shown. In this image each picture took 100px horizontally and 100px vertically , total 12 icons – 400x300pixels. The measurement will be 200px off by vertically and 100px of by horizontally. So, the background-position property value will be -100px -200px.

You do not have to worry about combine multiple images and measure them manually. There are lots of CSS Sprite websites available to combine and sprite multiple images at once automatically. One of them for CSS Sprite I use http://css-sprit.es/.

You can download all correspondence files from here to test CSS Sprite at your own.

Having problem? Just comment below, Thanks.

One thought on “CSS Sprite: What is it and how to do it

  1. Your post, CSS Sprite: What is it and how to do it – Cyberster's BlogCyberster's Blog, is really well written and insightful. Glad I found your website, warm regards!

    [links removed]

Leave a Reply

Note: Your email address will not be published. Required fields are marked *