Image Sprites in Cascading Stylesheet

In this article we will see how to create an image sprite.

An Image Sprite is a collection of two or more images created in a single file that is put into a single image.

For the demo we will be using this image.

image

In the image above we have three different images, each with different colors. But all of these images are created in a single file.

Currently in my Index.html, I have the following code inside the body section.

codes

If we open this page in a web browser, it will look like this.

browser

The next step is to write some CSS code that will hide the links.

And since we are using an external CSS file, it is important to specify the external file address.

  1. <link rel="stylesheet" type="text/css" href="style.css"/> 

Create a new rule in your CSS file that will hide the links as in the following:

Create a new rule

The preceding rule states, look for a class with a name designIcon. Inside this class look for all the links and change the display from inline to block and set the indent to -9999px to hide the hyperlink.

designIcon

The next step is to create a rule that will add a home icon in white color.

add a home icon

The preceding rule states, search for an id Home and in that look for hyperlinks, if hyperlinks are found then set the width to 170px, height to 160px, set a background image, background position and set the background repeat to no repeat because we don't want the image to be repeated again.

background repeat

Now we will create another CSS rule that will change the color of the home icon to Yellow when the cursor is hovered over it.

background

In the preceding rule, we have used the background-position property. We want the position 0px horizontally and an offset of 158px because if you look at the image that we are using here, the yellow home icon is below the white icon. So, to shift the yellow icon up we need to set the offset vertically.

Save and refresh the page.

Hover your mouse, you will see it's working.

run

We will create another rule for when the home link is active, in other words when we click the home icon, the color should be changed to Red.

create another rule

color

So, we have created an Image Sprite for the home link. Now let's create the same for the message link.

created an image

In the preceding rule, we have written the same thing except we have added an offset to -180px that will hide the home icon present in the image.

Save and refresh the page.

refresh the page

Now when we hover the mouse, we want the message icon color to be changed to Yellow.

yellow

We are setting an offset both horizontally and vertically that will shift the Yellow colored image to the top.

Hover the mouse.

Hover the mouse

When this message link icon is active, we want to change the color from Yellow to Red. So, let's create a rule for that.

create a rule

In the rule above, we are setting the offset of 180px horizontally that shifts the home icon to the left and we are setting the offset of 322px vertically that will shift the Red colored image to the top.

red colored image

Advantage of Image Sprite

A web page with many images can take a long time to load but using an Image Sprite, the page loads faster.