CSS Preload Images

This is an interesting technique for preloading graphics. Resources: One here. This guy originated it, but it’s pulled down now.

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.gif);
       background-image: url(path/to/image2.gif);
       background-image: url(path/to/image3.gif);
       background-image: url(path/to/image4.gif);
       background-image: url();

This is much easier than using JS to do it. I need to experiment with it more.

9 replies on “CSS Preload Images”

Neither does work under Firefox 3.
Only loads the last declared ‘background-image’ 🙁
Nice idea, though 😉

im guessing it doesnt work cos css2* doesnt support multiple background images.

my solution was to create a div (i think i set it’s display:none) on the page with preloaded images with width=1 height =1 (height/width=0) seems to not load the image on some browsers.

from what i remember, it was compatible with firefox 2/3, safari 3, ie6/7


I encountered a situation that I need to preload not only images but including swf file that will be used in other pages of our company site, so I ended up using iframe to do it, If someone have a better solution for this please help.

Here what I done:

in my css here’s my code

.preload {
position: absolute;
top: -9999px;
left: -9999px;
height: 20px;
width: 20px;
overflow: hidden;

then at the bottom of my page before the closing body tag i insert the iframe in the div with a class preload and insert there the iframe that loads the html document consisting of all images and flash file that I need to preload and will be used in other pages of my site, here how I do it.

<iframe src=

Whatya think?