preload images with css background images?

Question

there is the simple well-known way of preloading images with a fixed-positioned div outside of the viewport that holds some images.

Is it actually the same to just use the background property in css and apply multiple images to a div with no content?

like so?

<div id="preload"></div>

#preload {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
    background: transparent url("../images/misc/formLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/selectLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/projectLoader.gif") no-repeat center center;
}

Would this actually work? Or does the last background property overwrite the other declarations?

Is it possible with CSS3 multiple backgrounds?

Answer 1

When you comma seperate the background images like so: background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); It should work. I don't know, if that works with `background:´. Just try it out.