CSS Only Image Preloading

One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in the CSS for the :hover state, that image will not load until the first :hover event and thus there will be a short annoying delay between the mouse going over that area and the image actually showing up.

Technique #1

Load the image on the element's regular state, only shift it away with background position. Then move the background position to display it on hover.

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

Technique #2

If the element in question already has a background-image applied and you need to change that image, the above won't work. Typically you would go for a sprite here (a combined background image) and just shift the background position. But if that isn't possible, try this. Apply the background image to another page element that is already in use, but doesn't have a background image.

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }

The idea create new page elements to use for this preloading technique may pop into your head, like #preload-001, #preload-002, but that's rather against the spirit of web standards. Hence the using of page elements that already exist on your page.

I had the idea to try to and use the same element, only use the :after pseduo-class to load the image, so you didn't need to rely on there being enough extraneous background-free images on your page to work with, but for whatever reason didn't want to preload them properly.


Check this article out for some more techniques, including JavaScript.


  1. Tony
    Permalink to comment#

    Interesting tips above. I used to use javascript for this but CSS preloads are easier to implement and fully browser compatible.

    A different way to pre-load images with CSS can be found here http://www.prismgraphicdesign.co.uk/blog/?p=12

    • Josh L
      Permalink to comment#

      Tony, your technique will not work in any modern browsers. Both inline and background images do not load when applied to elements whose display property is “none”.

  2. Home Design Mild
    Permalink to comment#

    Im dont undersantd

  3. Aaron
    Permalink to comment#

    This worked like a charm for me. Thanks for the great idea.

  4. Fred
    Permalink to comment#

    Aaand, in cnwtx example, if we use “display:none;” instead of “visibility:hidden;”… will the image cache as well anyway?:

     {content: url("./img.jpg");

    Thanks in advance.

  5. Anonymous
    Permalink to comment#

    I can’t paste this method here in the comments, but here is an excellent method I found:


  6. Auz
    Permalink to comment#

    What if you were to create one div? Then give it multiple backgrounds.

        background: url(/images/button-criminal-defense-hover.png) no-repeat;
        background: url(/images/button-dui-hover.png) no-repeat;
        background: url(/images/button.png) no-repeat;
  7. Pepe.pro
    Permalink to comment#

    Technique #2, intelligent!

  8. Jan
    Permalink to comment#

    Thanks cnwtx, your solution worked perfectly for me.

  9. Erick
    Permalink to comment#

    Im dont undersantd!

  10. Diseño Web
    Permalink to comment#

    Good solution thanks!

  11. 21paradox

    based on solutions above.

         content: '';
         background: url(../img/navHomeSel@2x.png), url(../img/navNewsSel@2x.png), url(../img/navOrderSel@2x.png),url(../img/navServiceSel@2x.png),url(../img/navPersonalSel@2x.png);

    Many browsers support Multiple Backgrounds now.


  12. Great solutions! But wont work for me...

    Love these solutions. I’ll definitely try them out sometime. But for my issue I am still at a loss. How would you do it on this page? My rollover is using two background images.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.