Question

I’ve been told that they do, but once the element with the CSS background image is made visible, the image seems to take time to load as if it’s not cached.

Should I be preloading these, or doing something else to ameliorate the slowness when they’re shown?

Answer 1

The solution i use, which is the common one nowadays is to use sprites as background-images;

this way the entire image is loaded, and all you need to do is to move the background position to see different areas

Here is a Tutorial on how to use them.

And a little example:

ul li {
   width: 50px;
   height: 20px;
   background: url(sprite.png) no-repeat 0px 0px;
}

ul li:hover {
   background-position: 0px -20px;
}

in this example the list item will have one background image, a button forexample, and when u hover over it the background is shifted 20px up to show the different version.