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?

Display Name · Accepted Answer · 2011-08-25 07:13:01Z

2

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.

answered Aug 25, 2011 at 7:13

Display Name

4682 gold badges5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joonas · Accepted Answer · 2011-08-25 07:21:46Z

1

You can put in multiple backgrounds to one element with css3. http://www.css3.info/preview/multiple-backgrounds/

If you want it to work in ie as well.. you wanna do it the <img> way.

Also one good way is to put multiple images in single image document and apply that as a background image to separate elements and use background-position: -20px 0px; to define the position where that one specific image is located. This makes all these images in this document load in the exact same time as they are in the same document..

Using this way, you only have to load one <img> or background and yet get multiple images loaded.

edited Aug 25, 2011 at 7:21

answered Aug 25, 2011 at 7:16

Joonas

7,3259 gold badges43 silver badges65 bronze badges

Comments

gtr1971 · Accepted Answer · 2013-10-31 20:13:25Z

This worked great for me in both Chrome and IE to preload the images and swap them on hover. The "preload" div has no height/width since the images are set to background, so it doesn't show on the page, and the images are ready when you want to swap them on hover. (you will obviously have to set height/width on the anchors. I'm just showing minimal CSS here to get the point across)

HTML:

<div id="preload"></div>
<div id="icons">
    <a href="http://..." class="social-button-1"></a>
    <a href="http://..." class="social-button-2"></a>
    <a href="http://..." class="social-button-3"></a>
</div>

CSS:

#preload {background: url('images/pic1b.png'), url('images/pic2b.png'), url('images/pic3b.png');}
.social-button-1 {background: url('images/pic1a.png');}
.social-button-2 {background: url('images/pic2a.png');}
.social-button-3 {background: url('images/pic3a.png');}
.social-button-1:hover {background: url('images/pic1b.png');}
.social-button-2:hover {background: url('images/pic2b.png');}
.social-button-3:hover {background: url('images/pic3b.png');}

Collectives™ on Stack Overflow

preload images with css background images?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related