Work with CSS Sprites (background images with :hover)

For quite a while we've been able to work with CSS sprites - one image with a bunch of icons/logos instead of a bunch of separate images. We use that one image as a background image and just reposition it to show what we want in the background of something. In this tip video, I'll show you how to make a sprite image, use it as a background in several list items (you can use it for anything), then show you how to apply the :hover psuedo-class to make it change position when the cursor is hovered over the list item! Very cool stuff.

Category:

Education

Tags:

• Adobe
• Dreamweaver
• sprite
• css
• background-image
• background
• position
• style
• sheets
• instructions

[m4712ix]

haha just a challenge, and I think it builds character...

[askbrianwood]

@m4712ix Yes it does, indeed :)

[m4712ix]

I'd like to challenge you to do this in a cms not using dreamweaver :-)

[askbrianwood]

@m4712ix I use these all the time in WordPress—a little know CMS :)

[danbortoc]

great tut! thanks!

[ihaitham]

nice tip thanks :)