Simple CSS Sprites

CSS sprites allow you to create a single large image containing smaller images in a grid and use the CSS background property to change the position of the visible area to the required image. They are a good way of reducing the amount of HTTP requests made for images on a website, therefore reducing the loading time. Sprites can be used for navigation icons and especially where many small icons need to be used.

This technique is based on a method used in old video games where developers would create a large image containing all of the game sprites and then used code to pull out the sprites to the mapped coordinates. The technique may be old but it is still very useful in “>website design and in this article I will be taking you through how to implement CSS sprites into your website.

CSS Sprites For Navigation

Using CSS sprites for a navigation menu gives the designer the advantage of creating a menu that cannot be done using simple CSS and text.

First of all you need to create an image you would like to use for your menu like the one I have created below. As you can see, the top half is what will be displayed on the website and the bottom half is the hover state.

CSS Sprite Menu

Once you have created your image you will need to measure the width and height of each button and write them down for later.

Next you need to open up your preferred code editor and open up a page you are working on or create a new XHTML page to enter the following code:

<ul id="nav">
<li><a class="home" href="#">Home</a></li>
<li><a class="about" href="#">About</a></li>
<li><a class="services" href="#">Services</a></li>
<li><a class="test" href="#">Testimonials</a></li>
<li><a class="contact" href="#">Contact</a></li>
</ul>

After you have put the code on your html page we can start with the CSS.

CSS to display the menu:

#nav { width: 452px; height: 41px; float: left; margin: 0px; }
#nav li { list-style-type: none; display: inline; }
#nav li a { background-image: url(images/css-sprite-menu.jpg); background-repeat: no-repeat; display: block; height: 41px; float: left; }

The CSS for the buttons:

This code will display the normal button state and then the hover state when the buttons are rolled over.
#nav li a.home { background-position: 0px 0px; width: 80px; }
#nav li a:hover. home { background-position: 0px -41px; }
#nav li a.about { background-position: -80px 0px; width: 80px; }
#nav li a:hover.about { background-position: -80px -41px; }
#nav li a.services { background-position: -160px 0px; width: 90px; }
#nav li a:hover.services { background-position: -160px -41px; }
#nav li a.test { background-position: -250px 0px; width: 115px; }
#nav li a:hover.test { background-position: -250px -41px; }
#nav li a.contact { background-position: -365px 0px; width: 87px; }
#nav li a:hover.contact { background-position: -365px -41px; }

Using CSS sprites for navigation can be fairly simple and means there are less images to load, which means faster loading times for your site. In the example above only one image needs to be downloaded instead of ten and even if the navigation has ten elements only one image will still need to be downloaded.

CSS sprites for displaying images:

Here I will take you through the necessary steps on how to use CSS sprites to display static images from one single image.

Making the image:

First of all create the image you want to use using Fireworks, Photoshop or whatever you prefer to use. Here is my image:

CSS Sprites

The image above consists of a group of icons divided by a 1px line. This isn’t needed but it will make it easier with the CSS. You will also need to create a transparent 1PX x 1PX GIF for later to use for the HTML.

The CSS code:

Add the following code in your CSS to load the sprite image:

.sprite {background:url(../images/css-sprites.jpg); }

Then we have to define the height and widths of the images and since all the images are the same height we can add the code after the sprite image:

.christmas { height: 63px; }

Now to define the width of each image and create a class for each one:

/*Christmas*/
.decor { width: 62px; }
.tree { width: 63px; }
.snowman { width: 63px; }
.hat { width: 62px; }
.gift { width: 63px; }
.cane { width: 63px; }

Next we have to define the background position:

/*Christmas*/
.decor { width: 62px; background-position: -1px -1px; }
.tree { width: 63px; background-position: -63px -1px; }
.snowman { width: 63px; background-position: -128px -1px; }
.hat { width: 62px; background-position: -1px -64px; }
.gift { width: 63px; background-position: -63px -64px; }
.cane { width: 63px background-position: -128px -64px; }

The background position always needs to be negative because the image will move to the left to reveal each image.

Creating the HTML code:

<img src="images/transparent.gif" class="sprite christmas decor" alt="Decoration Image" />
<img src="images/transparent.gif" class="sprite christmas tree" alt="Tree Image" />
<img src="images/transparent.gif" class="sprite christmas snowman" alt="Snowman Image" />
<img src="images/transparent.gif" class="sprite christmas hat" alt="Hat Image" />
<img src="images/transparent.gif" class="sprite christmas gift” alt="Gift Image" />
<img src="images/transparent.gif" class="sprite christmas cane” alt="Cane Image" />

For CSS sprite images to work they must have a width, height and background position defined otherwise the whole image will be displayed.

To easily create sprites for your website visit . This site will create the sprites you need and provide you with the supporting CSS code.

Related posts:

  1. A Simple HTML5 Template Tutorial
  2. Grid Frameworks
  3. IE6 Hacks And Fixes
  4. CSS Absolute Positioning
  5. CSS3 Techniques

Tags: , ,

Leave a Reply

Contact Us Today...

For more information regarding any of our services or to arrange a free consultation simply send us a message or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Firefox 4 Beta

Mozilla have released the first beta version of Firefox 4. The latest version of this browser will include better support for many of the new web technologies, a new add on manager, crash protection from third party plugins and accelerated hardware support. One of the most obvious changes is that the tabs have now been moved [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482