CSS Sprites Tutorial

In this CSS tutorial we take a look at CSS Sprites.

View Live Demo of Code:

Download Files used in Video (.zip):

Follow LearnWebCode on Twitter for resources and updates:

[cutefunnypets]

Thank God...finally got someone on YT to explain sprites without complicating the stuff around....thanks for the clear explanation and keep up the good work! Subscribed already

[ReinierMatthews]

Lol. After all those years, your material still is a great reference in times my poor memory gets flooded with all the code and development. "hmz, forgot how it was. Let's ask Brad!" and watch a vid of yours.

I know making videos is hard work and I wanted you to know (again and again) you're an inspiration and I owe you. Greets form abroad.

[tonytony-fcgq]

11 years and this video is still great, thank you

[hrblocked]

"Hope you feel like you learned something" sounded like "Hope you Fk'n learned something" haha. Good tutorial!

[MickJnr]

I absolutely love your tutorials! They are so much better than the rest on YouTube!

[LYRICSO]

This is one of t the best tutorials on the internet frr!

[khalidelgazzar]

Great tutorial. Works even after 7 years of publishing it!

[CarltonStith]

Your explanation really rocked! I have several images that I needed to use for a web site that I just built and I was having a difficult time understanding Sprites until I watched your tut.

[RameenFallschirmjager]

This is so clever and I wonder why no one talks about this anymore!

[EgbertVisser-wg]

Great explanation! Simple, easy to follow. Thanks!

[clevermissfox]

“Just Google gimp…..editor. Gimp IMAGE editor”

Good catch. Could’ve traumatized many a css curious coder… or triggered a new fetish 😂

[CoffeJava]

very useful video. one of the most understandable that I have seen

[naomibutler-abisrror]

This finally makes sense! Thank you for the tutorial.

[khairfaris]

Great and easy to understand straight-forward tutorial. Good job! I just got a few questions..

1) For the contact image background property, can I use "url(img/sprites.jpg) top right no-repeat" instead of "-120px 0px no-repeat" ?

Also am I correct to say the width of your sprite image is 240px?

thank you!

[derekbrown]

Right at 6:43 is what I was having trouble with. I just couldn't visualize what or why we added the -120px, in this instance for example, but it's because when the user hovers we will include the imagine at -120px to show that section of the image. At least I think. I am starting to get it.

[stephenung]

Thanks for the tutorials, now I am confident to build a responsive website!

[samdanisatti]

You are so good teacher Allah bless you with more knowledge and skill .

[salesbrahma]

Where do you draw the sprites? Could you please suggest some softwares or provide links?
Thank You!

[daysinSunnyJune]

great video, thanks for the tutorial!

[rejj]

This video simply ROCKS! thanks for sharing. really!