enavu webdevmania tutsvalley psdestination
visit the enavu network
3 Comments Article Title Overlay

Quick and Easy Sprites

The easiest and fastest method of using sprites in your websites.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

The easiest and fastest method of using sprites in your websites.

Sprites might seem like a complicated subject, and i won’t lie to you they can get confusing at times especially if you decide to make them complicated. Today i wanted to go over the simplest and fastest method there is.

Let’s define a sprite so it’s easier to understand the method. Sprites are a way for you to use a single image and display it in multiple ways. Here is a little graphic to illustrate it.

sprite explain graphic 1

As you can see we have an element like an anchor. We usually use an anchor because on hover (cross-browser) we can switch the background position to top and have the bottom of our sprite show up, this usually contains a hover effect of a link. Let’s look at some sample code.

So here is the information you need to know from the styling above. We make the anchor display block so that we can set a custom width and height, otherwise our width and height won’t apply. We set our background with position top center and make it not repeat although that should be unnecessary since we are specifying the exact height and width of our sprite. Then the trick is adding the hover effect that changes only the background position to the bottom.

Related posts:

  1. 10 Amazing Free Website Templates
  2. Centering a Div Vertically and Horizontally via pure CSS or with JS
  3. Web Forms: Semantic Mark Up in our Forms [part 2]
  4. Making image captions using jQuery
  5. 10 Important Tips and Tricks about using DreamWeaver

Did you absolutely LOVE this article... share it!


  • Just some feedback about the website itself not the content: I like the shadow text on the headlines and capttions, but it makes the article text hurt my eyes. You chose a font with good contrast and legibility, but the shadowing takes away from it.

  • Thanks, i will take that into consideration!

Leave your own!


freedcamp free project management

Popular Articles

fzilla file hosting