CSS Sprites Tutorial

In this CSS tutorial we take a look at CSS Sprites. Check out my premium 9 hour web design video course:

View Live Demo of Code:

Download Files used in Video (.zip):

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:






26 responses to “CSS Sprites Tutorial”

  1. everest108 Avatar

    Don't you mean down 120px, not up?
    Great video, and yes, I fucking learned something. 😛

  2. superjokerrr Avatar

    Does not work with li inside nav>ul

  3. Jewelry July Avatar

    I don't understand how he knows the exact location of the icon he wants? How does he know that the house is 120 by 120? I understand how he is moving them but how does he know the exact pixel location of each icon?

  4. Sapna Naveen Avatar

    This was Helpful. Thanks 🙂

  5. Luciano Oliveira Avatar

    great video, thanks for the tutorial!

  6. Derek Brown Avatar

    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.

  7. Stephen Ung Avatar

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

  8. Lance Vercetti Avatar

    Thanks alot! got it! 😉

  9. Jason B. Lewis Avatar

    Great tutorial! Thanks!

  10. Роман Филиппенко Avatar

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

  11. hrblocked Avatar

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

  12. Naomi Butler-Abisrror Avatar

    This finally makes sense! Thank you for the tutorial.

  13. charliehrse650 Avatar

    Tutorial begins just after 4:15

  14. Carlton Stith Avatar

    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.

  15. rejj0313 Avatar

    This video simply ROCKS! thanks for sharing. really!

  16. Gintas DX Avatar

    SpriteSheep 😀

  17. Gintas DX Avatar

    Why not simply using SpriteSheet offline CSS sprites generator for Windows?
    It will generate CSS code with all sprite positions.

  18. 17zu8 Avatar

    is it possible / sensible to create a picture gallery (only 3 or 5 images) with this?

    (so when you click on the image, the next one will appear)

  19. Khair Altamimi Avatar

    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!

  20. The Most Interesting Man Avatar

    PLEASE PLEASE PLEASE! HELP ME!?! How do i distort or condense my FONT to be 80% on the x axis???
    please help me???

  21. The Most Interesting Man Avatar

    PLEASE PLEASE PLEASE! HEP ME!?! How do i distort my FONT to be 80% on the x axis???
    I liked and SUBSCRIBED please help me

  22. pcfreakout Avatar

    what editor are u using?

  23. MickJnr7 Avatar

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

Leave a Reply

Your email address will not be published. Required fields are marked *