Press - A classy Minimalist Wordpress Theme

How to use CSS Sprites
Posted on 16 March, 2009 at 17:01 PM There are already 23 Comments

About the Show

David shows you the basics of CSS Sprites how to use them your site design, they cut down load times and server requests. They are also easy to implement.

Links mentioned in this post:

User Comments

John MacMenamin's Gravatar

John MacMenamin    16 Mar, 2009 17:16:37 PM

Well done tut. That's the best I've seen that explained anywhere.


Rob MacKay's Gravatar

Rob MacKay    16 Mar, 2009 18:05:56 PM

I love using sprites :)

another good one guys :) keep goin :)


Mike's Gravatar

Mike    16 Mar, 2009 19:59:55 PM

Never worked with sprites, but now i will try it. Thx for the explanation. Simple and usefull


sdwrage's Gravatar

sdwrage    16 Mar, 2009 21:32:09 PM

Great tutorial :) keep em coming!


Sam's Gravatar

Sam    17 Mar, 2009 03:29:26 AM

I actually discovered this by accident when I used a similar technique (along with some JavaScript) to do an animated image (ie, something True Colour like a PNG or JPEG).


Arian Xhezairi's Gravatar

Arian Xhezairi    17 Mar, 2009 12:59:17 PM

Very fundamental explanation. Simple yet useful. Well done David.


Rafael Nascimento Sampaio's Gravatar

Rafael Nascimento Sampaio    17 Mar, 2009 13:32:00 PM

I already see this before, but when you talk about obox use it I have to see, so I open the source code, and find the css path, soon i found the background, in png state, but I'm thinking that's dont need a transparent background or to be far one of other when they are squares, has your screencast, maybe if they don't be transparent and be more close one of other they weigth can be more light, but who knows, only testing to see, but now I have to work. See you guys soon.

Sprite of obox-design.com - www.obox-design.com/images/sprite.png, I hope you don't mind.


madmax2600's Gravatar

madmax2600    17 Mar, 2009 15:01:35 PM

Nice and easy workaround - really great tut. THX for sharing your stroke of genius. ;)


Analiza's Gravatar

Analiza    17 Mar, 2009 15:55:09 PM

Again, one of the most simplest ways of explaining it I have seen by far :) Great job Dave :)


David Perel's Gravatar

David Perel    18 Mar, 2009 10:32:54 AM

Thanks everyone for the compliments. I must be dead honest and say that I thought this would be my worst Tutorial. I forgot all the proper terms and stuttered the whole way through, so I am quite relieved that everyone found it useful :)

@Rafael - The reason I was using PNG's was because the dark blue background was meant to have more detail in it. That may still come at a later date but for now it would help if I made them GIF's. It is on my long list of "to-do's"


Tom's Gravatar

Tom    22 Mar, 2009 07:43:47 AM

Fantastic tutorial...thank you.


bogdan pop's Gravatar

bogdan pop    28 Mar, 2009 19:17:07 PM

I have seen a similar screencast on CSS Tricks a while ago....


Rob MacKay's Gravatar

Rob MacKay    28 Mar, 2009 22:41:41 PM

@Bogdan - I bet there are many out there...

Its better to have more than one perspective, people learning will find it easier to grasp if they miss understood the first time.


Cristhian Bedon's Gravatar

Cristhian Bedon    06 Apr, 2009 22:40:27 PM

Wow, This is the first time I have heard of sprites combined with CSS, great tutorial - it was simple and sweet.


Frato's Gravatar

Frato    22 Apr, 2009 15:35:08 PM

Maybe you could try YASC, a tool I wrote to easily generate the css rules for your sprite images : www.lecentre.net/fratoblog/yasc/


Rich's Gravatar

Rich    20 May, 2009 18:24:47 PM

Couldnt really understand what you were saying clearly, but thankyou for taking the time to make this video


andri's Gravatar

andri    24 Aug, 2009 00:38:30 AM

excelent... thx for tutorial..


joe's Gravatar

joe    17 Sep, 2009 15:55:25 PM

nice video, thanks for sharing, I didn't know it is possible to do it this way


mel's Gravatar

mel    08 Oct, 2009 00:10:44 AM

cool, thanks a lot for this tutorial!


sunnybear's Gravatar

sunnybear    11 Oct, 2009 16:46:15 PM

There is an automated tool to create CSS Sprites of almost every complexity. It's included into Web Optimizer - www.web-optimizer.us/ and is available as a free service -- sprites.in/ . It covers about 98-99,5% of all possible cases of Sprites usage.


waleed's Gravatar

waleed    17 Oct, 2009 03:14:14 AM

Css sprite Generator, The Top 4 CSS sprite generator:: ledomoon.blogspot.com/2009/10/css-sprite-generator-top-4-css-sprite.html


Robert's Gravatar

Robert    08 Jan, 2010 14:29:57 PM

Thanks for the tut! very useful. Thanks.


adijuh's Gravatar

adijuh    23 Jan, 2010 12:46:30 PM

I thought it was interesting