In this CSS tutorial we take a look at CSS Sprites. We learn both why and how to use this wonderful technique which reduces the HTTP requests a page makes. CSS Sprites are made possible by the “background-position” property, and a basic understanding of placing images in a grid in one unified file.
If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my updated 8 hour video course and learn pro-level HTML, CSS, and responsive design.
Thank you for the great tutorial.
You are doing excellent work of sharing your learning.
I had a question. Do you recommend using sprite generators to get the position correctly rather than trying to calculate yourself (specially for people like me who get high fever even at the mention of the word ‘math’). If yes which tools do you recommend.
Cheers
Just found your site. Its wonderful…thanks so much for the tutorials, they seem really nicely done.
Why so long since you last posted?
Brad,
Thanks for this tutorial… It is very informative.
I do have a question…
Why do you need:
display: block;
text-indent:-9999px;
I’m unclear on the reason for that. I’ve been working on a sprite that seems to work well by itself without it. However, when I insert it into the nav where I want my sprite, it doesn’t appear correctly. I am using a new theme for WordPress that isn’t clear where to place the HTML code. The CSS part seems easy enough for the theme I use.
So, I’d like to know what that code would do.
Thanks
Hi Heidi,
The “display: block” and “text-indent: -9999px” declarations are used to hide the text of the link.
For example, if you had a hyperlink with anchor text of “Home” and you actually wanted it to simply display as a home shaped icon instead of the word “Home” you can hide the text using the above code.
I’m actually planning on releasing a series of WordPress lessons in the future, but for now I’m afraid the best advice I can give is to (A) try out the sprite technique in a sample page on your local hard drive until you are familiar with the process and then try to apply it to your WordPress site and (B) use the Mozilla Firefox browser and install the FireBug plugin. You should be able to find a tutorial on how to use the FireBug plugin, but in short it helps you see where certain elements are located, what styles are being applied to them, and from what sources.
I’ll try to put out a FireBug tutorial in the near future.
Thanks!
Thank you for a wonderful series of tutorials – you have a natural knack as a teacher. And like all good teachers you leave your pupils wanting more: like how to correctly position the ‘orange’ block in the CSS Z-Index Tutorial! [LOL]
My genealogy website utilizes a great dedicated software package complete with various starter templates that one can customize – if one knows how. All customizations I’ve done (minor as they are) have been accomplished through pure trial & error and ‘coding’ by example and the end results have been more or less by happenstance. Yes, I have learned somethings by this approach but never really understood what I was doing because I don’t know enough and that set me on my current path to learn HTML, CSS and PHP (for starters). In my quest I found your site and it’s simply marvelous. I can’t believe in a few short minutes I finally learned what is a Sprite!
Hoping you do produce lots more tutorials!
By the way, what software do you use to produce the videos?