Skip to content

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.

Published inUncategorized

9 Comments

  1. Great solution, I assume I just put an empty div at the end of my page…

  2. alex alex

    this doesnt work with firefox 2, but it does with safari

  3. xPheRe xPheRe

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

  4. Hmm, Ill have to work on a different technique.

  5. alex alex

    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

  6. 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=

  7. Continuation:

    <iframe src=

Leave a Reply