Web designers often stylize the elements in the markup of their web pages. For example, they give different colors and background properties to the hover and steady states of the links in a link-list (eg. navigation menus), making a link look like a button (just like a download button), decorating images with borders, changing bullets in an unordered list and more.

Generally, Web design beginners use different images for the backgrounds. Image backgrounds are of two types: repeatable (tilable) and non-repeatable (non-tilable). Obviously, when it comes to display screenshots, photographs, diagrams, graphs, avatars, and similar things, you have to use individual images. But in case of non-repeatable web backgrounds, the image usage on web pages can be controlled by using CSS sprites. But what’s the clue behind using CSS sprites?

Why should I use CSS sprites?

Before going further, I would like to mention some basic concepts whom every Webmaster should be familiar with:

  • When you open a website, it sends requests to it’s server to load files (like images, HTML documents, PHP requests etc.).
  • Load time of a website / web page proportionally depends on the number of requests sent while loading.
  • Most of the requests are in form of images.
  • It is always better to have the number of requests on web as low as possible – to make a website load faster.

It’s very clear from the above points that having a low number of requests helps a website to load fast.

A website should load fast because:

  • It increases the audience as it is reachable to every group of people around the globe using different types of internet connections.
  • It represents good SEO and helps improving SER (Search Engine Ranking).

The number of requests doesn’t matters when you’re on a fast connection, but in the less favorable circumstances, things will be slowed down, there might be a time lag. And CSS sprites can overcome that time lag, if it is caused due to a lot of background images.

How a CSS sprite reduces the number of requests?

Using a sprite in CSS includes the compilation of all different (non-repeatable) background images of a web page into one, hence reducing the number of request (caused due to non-repeatable background-images) to 1 only. If you are a Web designer, you have been working with it. You can observe the effect of using CSS sprites after implementing them on your website.

Which websites use CSS sprites?

Google, Yahoo!, AOL, eBay, YouTube, Amazon, CNN and the list goes on.

You can learn using CSS sprites using the below tutorial. In this tutorial, we’re going to create a list or bar with hover effects using CSS sprites. The list or bar contains subscription, contact and socialize links like RSS, facebook, twitter, StumbleUpon and e-mail.

Note: This tutorial requires a basic understanding of XHTML and Adobe Photoshop.

Requirements:

  • Basic knowledge of XHTML (HTML + CSS)
  • Basic knowledge of Adobe Photoshop
  • Obviously, a text-editor and Adobe Photoshop (I’m using CS2)

Basic concept:

We’re going to create a sprite image that will be used in our HTML page. It’s display will be controlled by a CSS file. Create a folder on your PC (wherever you want either on Desktop or in My Documents) and name it as you wish. Say, you named it “CSS Sprites”

Creating the sprite:

  1. Download Pixel Perfect Icon set (you can use the one of your own choice further) which is free for personal and commercial work.
  2. Open the icons in Adobe Photoshop and collect them in a single 300 x 200 Photoshop document side-by-side (you can simply drag and drop the icons on new document, refer below screnshot). I used 32 x 32 pixels RSS, Facebook, Twitter, YouTube and e-mail icons in this tutorial.
  3. Working with CSS Sprites
  4. Adjust the icons as given in the screenshot with a distance of 1 pixel in-between.
  5. Working with CSS Sprites
  6. Crop the image and save it as shown in the below screenshot with the name sprite under PNG 24 format in the CSS Sprites folder.
  7. Working with CSS Sprites
Difference Chart

Creating XHTML:

  1. Open your favorite text-editor and implement the below given HTML code:
    <html>
      <head>
        <title>CSS Sprites - A demonstration</title>
        </head>
      <body>
        <div class="links">
          <ul>
            <li>RSS</li>
            <li>facebook</li>
            <li>twitter</li
            <li>digg</li>
            <li>e-mail</li>
          </ul>
        </div>
      </body>
    </html>

    You can simply copy-paste the code in the text-editor and save it as css-sprites-demo.html. So, with the above markup, we created an HTML document which bears a title CSS Sprites – A demonstration whose body contains a division (<div>) with a CSS class links with an unordered list (ul) in it. If you’re not getting the code, you can take a look at the basic HTML tutorials at W3Schools.

  2. Now, create a new file in the text-editor and implement below stylesheet (CSS) code:
    div.links {
      padding: 10px;
      width: 280px;
      background-color: #f9f9f9;
      border: 1px solid #eee;
      border-width: 1px 0;
    }
    div.links ul {
      margin: 0;
    }
    div.links li {
      display: inline;
    }
    div.links li a {
      background-image: url(images/sprite.png);
      background-repeat: no-repeat;
      text-indent: -99999px;
      color: transparent;
      width: 32px;
      height: 32px;
      display: inline-block;
    }
    div.links li a.rss {
      background-position: -1px -1px;
    }
    div.links li a.rss:hover {
      background-position: -1px -34px;
    }
    div.links li a.twitter {
      background-position: -34px -1px;
    }
    div.links li a.twitter:hover {
      background-position: -34px -34px;
    }
    div.links li a.facebook {
      background-position: -67px -1px;
    }
    div.links li a.facebook:hover {
      background-position: -67px -34px;
    }
    div.links li a.youtube {
      background-position: -100px -1px;
    }
    div.links li a.youtube:hover {
      background-position: -100px -34px;
    }
    div.links li a.email {
      background-position: -133px -1px;
    }
    div.links li a.email:hover {
      background-position: -133px -34px;
    }

    Save this file as style.css in the same folder. Crucial part of the above CSS code is background-position, which controls the position of background-image (sprite.png) behind the links. We’ve given hyperlinks height and width of 32 pixels to fit the icons behind them and used text-indent property to hide the text by sending it -9999999 pixels away from the main display and setting its color to transparent. Rest of the properties are commonly used in HTML lists. If you’re confused, head over to W3Schools CSS tutorials.

  3. Add another line in the HTML document (which we saved as css-sprites-demo.html in the step 1) below </title> tag:
    <link rel="stylesheet" type="text/css" href="style.css" />

    By this line we’re including the CSS document (style.css) in our HTML document (css-sprites-demo.html). Save the document. We’re almost done.

  4. Now open css-spirtes-demo.html in your Web browser. It will look like the below given screenshot.
  5. Working with CSS Sprites

So, we finally implemented CSS sprites and made a stylish link-list. This demonstration works well on Google Chrome, Mozilla Firefox, Safari and higher versions of Internet Explorer (8 and above). I hope you enjoyed the tutorial. Feel free to put out questions.

Download the demonstration »