Here’s a pretty cool trick to help speed up image loading. I’m sure you implemented an image rollover before. Typically, you would make 2 images – one for the default state and one for the hover state. When you first rollover your image, there would be a slight pause while the new hover image loads. Once the image is loaded, the rollover is way smoother since the image has been cached.
You could use JavaScript to preload the hover image, and that is how the image rollover is typically implemented. Wouldn’t it be great if we could use only CSS to do the same thing? That’s where the background-position property comes in.
