 i have already shown how to use css sprites but there are times when you just cannot use them sometimes you still want the benefit of preloading the image so you have to get creative an example i have created a demo of a css sprite in action the sprite has the two images sitting on top of each other and each link is using the image as a background image and then shifting the position of it when hovering a spritevert br background url trevor davis com images content 2008 11 sprite vert gif no repeat top left br padding left 30px br br a spritevert hover background position bottom left it works great in the first example but what happens if the user resizes their text the sprite starts to break when i am building a site i am always thinking with the bulletproof mentality of dan cederholm so this is just not an acceptable solution now we obviously couldnt position the images next to each other because we would still have a problem when shifting the image around the solution typically when you are using css sprites there is another element containing the anchor whether its a list item paragraph div etc this solution will work unless you have a background image on that element as well example i have created a second demo that fixes the first example the idea behind it is that instead of combining the images into 1 image you split it into 2 then you place the image that is being shown on hover as the background image on another element preferably a containing element just positioned off the screen then when you hover you switch the background image which has already been preloaded so you dont get that white flicker that may be a little hard to understand so ill give an example the markup p class= spritecontainer a href= class= spritevert hover over me a pbr p class= spritecontainer a href= class= spritevert spritevert2 hover over me a pbr p class= spritecontainer a href= class= spritevert spritevert3 hover over me a p note the extra classes of spritevert2 and spritevert3 are just used to change the font size the css p spritecontainer br background url trevor davis com images content 2008 11 sprite hover gif no repeat 9999px 9999px br br a spritevert br background url trevor davis com images content 2008 11 sprite off gif no repeat top left br padding left 30px br br a spritevert hover br background image url trevor davis com images content 2008 11 sprite hover gif br more explanation so looking at the previous example i am adding the background image that i want to appear on hover as the background image on the paragraph with a class of spritecontainer and i am positioning it way off the screen then when i hover over an anchor with a class of spritevert i change the background image to be the one from the paragraph with a class of spritecontainer conclusion while this is not as ideal as using css sprites because you increase the number of hits to your server it can help to eliminate the white flicker that you get if the image is not preloaded 