CSS Sprites: the rollover with a single image using CSS

Published by TheJoe on

Estimated reading time: 3 minutes


This article was published more than a year ago, there may have been developments.
Please take this into account.

Let's talk about CSS. Today we see a technique has always been recommended for lighten pages and faster loading times (not for nothing has for years been used on the homepage of Google).

In short it is to include most of the navigation elements on the page within a single image file, then recall many times how much will prompt page thus avoiding uploading multiple images different.

Although technically the time gap is very small (we are in the field of cents, is the name thousandths second) the difference is seen, and also from the aesthetic point of view be loaded images all at once an impression of greater speed.

We see for example the image that Google uses in his research:

The image used by Google
L’immagine usata da Google

Someone has already recognized some elements constantly called into the search page, such as the logo, the “The” repeated at bottom of page, direction arrows indicating previous and next page, the favicon, le sets for the evaluation of results, and I'll stop here.

For inclusion of the image within the Google page uses in part Javascript and in part i CSS. I will not elaborate on the principles behind this choice, Suffice to say that the amount of requests each day, Google has to deal with is so broad that even a slight optimization of the page corresponds to a substantial savings (economically and ecologically) Google for itself and for all of us.

Leaving aside for JavaScript now let us analyze the steps because the effect is returned using only HTML and CSS. Let's start with something simple: the next button is formed from two images. The steps that we will see will help create the’rollover effect Hover with one image. The total image size 343 pixel di larghezza x 212 pixel height: is very large for a button, but this is merely an example.

Look here:  Alternative open source a cPanel e Plesk

We begin to see how HTML format.

<a id="contact us" href="#" title="contact us"><span>Contact</span></a>

This will be the HTML line which will show the button in the page. Note the’attribute ID” the style of which will then be changed using the CSS. And it's’ easy to notice that the line above actually does not contain any links to image, is simply un link testuale: Contact“.

And now let's see how set the CSS to transform our link in a Button with rollover effect Mouse:

#contact us{
  display: block;
  width: 343px;
  height: 106px;
  background: url("img/bottone.png") no-repeat 0 0;

#contact us:hover{
  background-position: 0 -106px;

#Contact span{
  display: none;

Eye to draw the right image. I've put in the directory “img“. The button is very large, how easy it is to note the width is the initial image (width: 343px;), while the height is exactly half (height: 106px;). In the event that the mouse does not pass over to the button will be displayed the upper half Button (and receives 106 pixel), while if we see the second rule the voice “background-position” we can see a negative value -106px“. This rule will place the button at the top 106px, in fact making us see only the second half of the image in the same position it was in before the.

The third rule is simply to hide text Contact“.

To get a preview of the operation Who clicca.


I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.


TheJoe · 26 December 2010 at 4:18 PM

Wow, thanks for the comment Luke technical. I have already taken steps to change the title. 😉

Luke Canducci · 26 December 2010 at 1:26 PM

For completeness, when it comes to this technique is spoken more frequently than “CSS Sprites”, the rollover is the practical result that is obtained (that being completely CSS does not generate compatibility issues on different browsers or with those who have javascript disabled).

BTW, nice one 😉

Leave a Reply

Avatar placeholder

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.