Building a CSS-Sprite Based Website

By Leichim Saturday March 27, 2010

What is a sprite? A CSS-Sprite is a single image which containt multiple images and is used and placed using css on such a manner that you use each image in it. Ok, this sounds a little bit vague (a more detailed description can be found on: http://www.alistapart.com/articles/sprites/), but a css sprite helps to limit your http-requests. In other words, it is used for optimizing your website loading times. It reduces your loading times. This is especially important when having a very big site with many visitors. However, it is also interesting to learn this technique for own purposes.

In the first part you’ll learn to make a very basic sprite in Photoshop. It may not win prizes for its beauty, but the purpose of this tutorial is to learn how to use css-sprites. We want to have multiple elements in our sprite, such as buttons, a header background, etc. It is assumed that you understand the basics of photoshop, html and css and thus can read it. Much is explained in the tutorial, but you should know the basics. Please not that images will enlarge by clicking on them. Let’s start!

Skip the photoshop tutorial and directly go to the css-part.

You’ll working toward this:

Online demo

Part 1: Photoshop

In this part you will make the basic sprite in Photoshop.

Step 1:

Start with a new file (Ctrl + N) and make it 800 pixels wide and 400 pixels high. In the top of the image place an header image. My header image was 768×230 pixels, which also determined the width for the website. I used the image below, which is a cropped image from this stock photography post. You may find an image yourself and crop it to the right dimensions.

Step 2:

Now add the following blending options to the header you just added:

Step 3:

In a new layer (Ctrl + Shift + N), which I called Menubar make a fixed size selection of 768 x 40px, directly underneath the header as shown below. However, keep a little distance between these elements. I also put the Menubar in a new group the organisize the layers somewhat better.

Step 4:

Select the Gradient Tool (G or Shift+G if the Paint Bucket Tool is default) and set up the following gradient:

Draw this gradient as shown below. Hold Shift to draw the gradient straight. You should now have something like this:

Step 5:

Since our sprite needs to be transparant, we should unhide the default background layer.

Now draw a new selection with the Rectangular Marquee Tool (M), and use a fixed size of 150 x 40 pixels. It might be useful to do this in a new layer.

Go to Select > Modify > Smooth in your menu and enter a Sample Radius of 10px. The rectangular selection will now have rouned corners with a radius of 10.

Finaly, with the Rectangular Marquee Tool (M) selected, fixed size turned off, draw a selection at the lower part of the selection we made before. Hold Shift while doing this, so the drawn selection will be added to the current selection. Now we have a selection with only rounded corners on the top.

Fill this selection with #c60000. Duplicate this layer and place it to the right. Select that layer and fill it with white, so you have now something like this:

Step 6:

Add a New Layer (Ctrl + Shift + N) and draw a rectangle with the Rectangular Marquee Tool (M), with a size of 150 x 40px, next to the red and white shape. Fill it with the same gradient as used before for the large menubar. Now make a new Selection as shown below, and draw a very short White-to-Transparant Gradient in the lower edge of the selection, as shown below:

Step 7:

Copy the layer style of the Header Image, by right clicking on its layer and selecting ‘Copy Layer Style’.

Draw a new very thin but wide rectangle, as shown below, and paste the Layer style on it.

Now using the same technique as we did for the menu items, draw a footer element in a New Layer. Fill it with white and paste they layer style again in this layer, as shown below:

Step 8:

I added some more elements in my sprite to use for the website. You could add some icons as well, if you like. This is the final (.png) sprite we are going to use: As you can see it contains multiple image elements which are usually in seperate images on websites.

In photoshop, a handy tool for measuring the location of our image elements in our sprite image, is using the ruler. Under Edit > Preferences > Unit & Rulers the right units can be set up, and you can turn rulers on or off by pressing Ctrl + R (Or View > Rulers). Below is a part of the sprite with the rulers pasted right next to it:

In the second part we will use the sprite we made to build up the website. The sprite we are going to use can be download from here:

Download the .png sprite here.

For Internet Explorer 6 and lower, we need a .gif version of the sprite:

Download the .gif sprite here.

And for some the original .PSD sprite might be useful:

Download original .PSD

This is the outcome of the tutorial: Online demo

Step 9: The HTML Code

Head of html:

1
2
3
4
5
6
7
8
9
10
11
12

Sprite 
</head>

As you can see in the head part above, a different stylesheet is used for Internet Explorers below version 7. This is because these versions have many pains with transparancy, and we need the .gif sprite for these versions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

<body>

<div id="container">


<div id="header">
<div id="nav">
<ul>
<li class="current">
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
<li>
<a href="#">Item 4</a>
</li>
</ul>
</div>
<div id="navdown">
<ul>
<li class="current">
<a href="#" >SubItem 1</a>
</li>
<li>
<a href="#">SubItem 2</a>
</li>
<li>
<a href="#">SubItem 3</a>
</li>
<li>
<a href="#">SubItem 4</a>
</li>
<li>
<a href="#">SubItem 5</a>
</li>
</ul>
</div>
</div>


<div id="content">
<div id="sidebar">
<span class="rss">RSS Feed</span>
</div>
<div id="column">
<p>
<span class="old">Older post</span><span class="new">Newer post</span>
</p>
<div id="post">
<h2 class="postheading"> CSS Sprite Tutorial </h2>
<div class="postdata">
<span class="time">Posted at 16:11 </span><span class="comments">35 Comments</span> </div>
<div class="postcontent">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</div>
</div>
</div>
</div>


<div id="footer">
  </div>


</div>
</body>
</html>

<code>

This covers the whole html code. The comments in html explain what every part stands for.

<h2>Step 10: The CSS Code</h2>

The css-code is splitted in parts, so every part is explained. Under step 11, you can download the complete css code.

<h3 style="font-size: 1.17em;">General Set Up</h3>

First some general values are set up. In the body the background-color is set to dark-grey, the common font to Arial 12px. Visited links turn black.
<code lang="css">
/* CSS Document for sprite Tutorial on www.m-sign.nl */
/* CSS Document done by Leichim from www.m-sign.nl */
/* The TRouBLe rule defines the order of margin values: Top, Right, Bottom Left */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#333333;
}

a:visited {
color:#000;
}

Container

Hereunder is the container or wrapper id. The whole website will fit into this ID. The margin value ensure that the website is rendered at the top and exactly in the middle. The container will be 800px width.

1
2
3
4
5

/* CONTAINER */
#container {
margin:-10px auto;
width:800px;
}

Header

Now we are going to use the first image element in our sprite! Because the header image element was centered in our sprite, we can just locate it ’center top’ without the need of numeric pixel values.

1
2
3
4
5
6

/* HEADER */
#header{ background:url(sprite.png) center top no-repeat;
/* As you can see the position is determined by center and top */
height:270px;
width:800px;
}

Upper navigation

This is the id where the upper navigation elements (the buttons with rounded corners) will be in. As you can see it is exactly 768px wide, as wide as our header image. We made the size of your rounded corner buttons 150 x 40px, and as you can see the #nav is 40px in height.

1
2
3
4
5
6
7

#nav {
position:relative;
top:190px;
margin:0px 16px;
height:40px;
width:768px;
}

Upper navigation list elements

Now a list is used. The default bullit points are removed and the display is inline, or horizontal. As you can see now the first pixel values are used for the background position. In ‘#nav ul li a’ the background is positioned on such a way, that we only see the ‘white rounded corner button’ of our sprite. This is also caused by the width and height of our element, which is including the padding exactly 150 x 40px, the size this button was made in photoshop. Also margins and paddings are used to position each element and text within each element properly. But how do you know what pixel values to use? Using the rulers in photoshop is a handy tool for this, but it is also some trial and error work till it is positioned fine. The image below shows an example how the position is determined:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#nav ul {
list-style:none;
display:inline;
}

#nav ul li {
margin-right: 3px;
float: left;
}

#nav ul li a {
background: url(sprite.png) -176px 124px;
/* These value determine the position of our sprite. */
text-decoration: none;
color:#000;
display: block;
padding: 15px 0px 0px 10px;
height:25px;
width:140px;
}

#nav li a:hover, #nav .current a {
text-decoration: none;
background: url(sprite.png) -16px 124px; color:#FFF;
}

Lower navigation

The same is done for the lower navigation menu.

1
2
3
4
5
6
7
8

#navdown {
background: url(sprite.png) -16px 164px;
position:relative;
top:190px;
margin:0px 16px;
height:40px;
width:770px;
}

Upper navigation list elements

And for its list elements:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#navdown ul {
list-style:none;
display:inline;
}

#navdown ul li {
margin-right: 5px;
float: left;
}

#navdown ul li a {
text-decoration: none;
font-family:12px Arial, Helvetica, sans-serif;
color:#FFF;
display: block;
padding: 17px 0px 0px 10px;
height:23px;
width:110px;
}

#navdown li a:hover, #navdown .current a {
text-decoration: none;
background: url(sprite.png) -326px 120px;
}

Content

Now we are going to set up the content. An image element within our sprite was made for the content (the very small white part) but a problem is encountered! Normally this single image would be repeated over the y-axis. But now this is impossible, since it will repeat the whole sprite image. So for repeating images, in the case that the are repeated because an div element is getting bigger by its content, a sprite cannont be used. Another seperate image should be made for this content background image, but I decided to just put the background color white because it closely resembles what I wanted. The content frame acts like a kind of wrapper for all elements within the content.

1
2
3
4
5
6
7
8

/* CONTENT */
#content {
/* background:url(sprite.png) -16px 68px; This cannot be used since it is going to be repeated! Here we should use another seperate image!*/
background: #FFF;
position:relative;
left:17px; /* margin-left:17px; Does work in all normal browsers, but not in IE 6*/
float:left;
width:768px; }

Sidebar & Column

A sidebar is set up, on the right side of the the content frame.

1	#sidebar { width:152px; padding:8px; float:right; }

And the column for our main text.

1
2
3
4
5

#column {
width:586px;
padding:7px;
float:left;
}

Post Content

Because we want the post to be positioned somewhat from the top and the left, relative position is used. This is also used to render it from a proper distance of the older and newer post links.

1
2
3
4
5
6
7
8
9
10

#post {
position:relative;
top:10px;
}

.postcontent {
position:relative;
top:-20px;
margin-left:60px;
}

Footer

Finaly the footer is set up, using another image from our sprite.

1
2
3
4
5
6
7
8
9
10

/* FOOTER */
#footer{
background:url(sprite.png) -17px 56px;
float:left;
/* margin-left:17px; Does work in all normal browsers, but not in IE 6, so is changed to position relative */
position:relative;
left:17px;
padding-top:5px;
width:768px;
}

Other Elements

I also added some small elements in my sprite, and the css code for them is below. The first class .postheading defines the background image of the heading. Strangely enough I had to use repeat-y instead of no-repat because otherwise the image would not be shown. .postdata is used for the area with time (.time) and comments (.comments) just under the header. At last we see the .old, and .new which define the old and newer posts, and the .rss which is for the small rss icon.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/*SMALL ELEMENTS */
.postheading {
background: url(sprite.png) -730px 123px repeat-y;
padding:15px 0px 15px 60px;
}

.postdata {
position:relative;
top:-30px;
right:-60px;
width:300px;
}

.time {
background: url(sprite.png) -142px 20px;
}

.comments {
background: url(sprite.png) -300px 20px;
}

.comments, .time {
font-size:11px;
padding-left:33px;
}

.new {
padding-right:20px;
margin-left:350px;
background: url(sprite.png) -707px 21px repeat-y;
}

.old {
padding-left:15px;
margin-left:60px;
background: url(sprite.png) -460px 21px repeat-y;
}

.rss {
background: url(sprite.png) -18px 22px repeat-y;
padding-left:17px;
}

Step 11: Finished

Now your css-sprite based website is finished! There might be better ways of using the css in general, but I hope that after this tutorial it is much clearer how to use sprites and process them in your style sheets. Since this is my first html / css tutorial, I’m eager to hear your comments and critiques.

3 Comments

webseite erstellen on Saturday 27, 2010
I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.
[Reply]
Abhijit V. Chaore on Saturday 27, 2010
Indeed these are he Useful sprite techniques. Thanks for sharing.
[Reply]
CSS Tutorial – Adding Social Media Icons to Your Site «
[...] multiple icons. More on the use of sprites,what they are and how it exactly works can be found in this tutorial.Now onto the important part. This is the image I’m going to use in the tutorial:Step 2: The [...]