New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Better Image Preloading with CSS3

I recently added to my growing library of image-preloading methods with a few new-&-improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me:

.preload-images {
	background: url(image-01.png) no-repeat -9999px -9999px;
	background: url(image-01.png) no-repeat -9999px -9999px,
		    url(image-02.png) no-repeat -9999px -9999px,
		    url(image-03.png) no-repeat -9999px -9999px,
		    url(image-04.png) no-repeat -9999px -9999px,
		    url(image-05.png) no-repeat -9999px -9999px;

Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images. Compare this method with the old way of using CSS to preload images:

.preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }  
.preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }  
.preload-03 { background: url(image-03.png) no-repeat -9999px -9999px; }
.preload-04 { background: url(image-04.png) no-repeat -9999px -9999px; }
.preload-05 { background: url(image-05.png) no-repeat -9999px -9999px; }

As you can see, the CSS3 method is a much cleaner way to preload your images using a single CSS selector. Note that we’re also going to need to ensure the background images aren’t being displayed in the preload element. For that, I suppose we could either hide the element using display:none or else position the images far off screen using -9999px positioning.


This technique works great in supportive browsers now, and the support will only get better moving into the future. Notice that we can include a partial fallback mechanism by preloading one of the images as a single background property value. Browsers that don’t get the multiple stuff will fallback to the single-value background property instead.

Also, browser support for CSS is much better than for JavaScript, so big improvement there. Beyond these things, the sheer ease of picking an element and adding all of our preload images as backgrounds is simply too easy not to take advantage.


Well, let’s see.. current browser support is not as good as it could be, mostly because of Internet Explorer. So besides the fact that IE may never understand multiple background-images, the downsides to using this method are pretty much nil as far as I can tell. Perhaps I am missing something completely obvious..? Maybe someone will elaborate on the non-presentational use of CSS? ;) Chime in!

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
USP Pro: Unlimited front-end forms for user-submitted posts and more.

30 responses to “Better Image Preloading with CSS3”

  1. According to the current browser support (as of April 2012) is pretty good. Only IE8 and older don’t support it, and since preloading isn’t an essential feature, I’m fine with that.

  2. To preload a number of images, my guess it would be best to preload the largest ones first then down to the smallest. Will that make a difference? I think so by testing a number of browsers after clearing out the browsing data. Notably, the IE7 loaded the slowest ! Anyone experienced that and why?

  3. Michael Tunnell 2012/09/10 1:35 am

    I thought of a solution to the incompatibility of IE8 & IE7 with multiple background-image (doesn’t work in IE6).

    This does involve extra markup so I realize that maybe this would make people cringe at that thought but it depends on how important IE8 support is to you. (sadly many people are still using XP)

    The process is essentially the same except instead of using multiple background-images we use a multiple class method.

    #preload.img1 {background:url() no-repeat -9999px -9999px;}
    #preload.img2 {background:url() no-repeat -9999px -9999px;}
    #preload.img3 {background:url() no-repeat -9999px -9999px;}
    #preload.img4 {background:url() no-repeat -9999px -9999px;}
    #preload.img5 {background:url() no-repeat -9999px -9999px;}
    #preload {display:none;} (optional of course)

    This will insure that every browser is supported even IE7 & IE8…I couldn’t bring myself to give a crap about IE6 so not going to bother with figuring out a solution for that.

    • Michael Tunnell 2012/09/10 1:37 am

      well I forgot to include the code tag in my previous post so here is the markup for this method.

      <div id="preload" class="img1 img2 img3 img4 img5 etc"></div>

  4. Is preloading just for background images?

    • Michael Tunnell 2013/01/06 6:30 pm

      Marisa, this is NOT limited to background images at all, you can use it for any images. The background loading is purely for how you load the images without displaying them.

      I used it for a simple javascript photo gallery so all of the images would be loaded before they were clicked on an image.

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
LOL @ “weekly” support: “Your request has been received and will be reviewed soon. Neil (your support guy) checks support requests weekly. Rest assured we’ll get to it!” — Gotta be kidding with this.
After several days of work, finally taking a break. If anyone needs me, I'll be in Zora’s Domain, working thru Mah Eliya shrine.
Never ever call the client a useless idiot. Even if it’s true.
Inevitable that Google shuts down Feedburner. Maybe this year? Who knows. Here is a nice summary plus alternatives.
There is no way that Marvel can serve up anything better than what they've already done with Infinity saga/Endgame. Knowhere to go but down, sadly.
I built a new search launchpad to make my life easier. So I can search multiple engines quickly and easily.
Updating all muh plugins for WP 5.5 imminent release! Wut August :)
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.