preload images with css background images?


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?

Problem courtesy of: matt


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.

Solution courtesy of: Display Name

View additional discussion.