Css – Preload image CSS

csscss-spritesimage-preloader

I have problem with a preloaded image on Firefox. On (webkit) Chrome/Safari it looks fine.

Let's take a look.

I have :hover load image
the css file:

.zz{background:url(../img/guzik_01_ofirmie_PL_A.png) no-repeat; height: 1px; width: 1px; position:absolute; } 

li#ofirmie{background:url(../img/guzik_01_ofirmie_PL_B.png) no-repeat; height: 44px; width: 108px; position: absolute; z-index: 1000;}

ul.menu li#ofirmie:hover {background:url(../img/guzik_01_ofirmie_PL_A.png) no-repeat; height: 44px; width: 108px; position:absolute;}

and HTML

<div class="zz"></div>

<li id="ofirmie" ></li>

Why doesn't Firefox load the image from the cache, rather than from server?

How can I fix it?

Best Answer

As long as it's possible don't use two images. Use CSS Sprites technique. Then you just operate on background-position property instead of different images.