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 to “CSS Preload Images”

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

  2. 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

    http://www.songbirdestate.com.au

  3. 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;
    display:inline;
    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=

Leave a Reply