Les images en ligne en CSS avec background-image: url()

Question

Je suis en train de charger un fichier GIF dans mon fichier Css, comme ceci:

li.box_entry { 
    background-image: url(data:image/gif;base64,R0lGODlhDAANANUAAPv7+/r6+vn5+ff39/b29vX19fPz8/Dw8O/v7+7u7u3t7ezs7Onp6ejo6Ofn5+bm5uTk5OPj4+Hh4eDg4N/f397e3tzc3Nvb29ra2tnZ2dbW1tXV1dPT09LS0tHR0c3NzcjIyMfHx8bGxsXFxby8vLe3t7W1tbOzs62traurq6mpqaioqKenp6ampqWlpaOjo6KioqGhoaCgoJ+fn5qampmZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADYALAAAAAAMAA0AAAZxQJtwyGYrVaLEQswGYWAOAygxWELxaFwCVUWi/bRyZaJM5nUezjInkcjHi8U2rVNhmJY++QZDg0NBgTExEPhxJ+NCogDY6PjiMqGisLCJeYDTIaNikmCgOhAwgnKUICKCsdBgYdMSgCRBgogSgZQ0EAOw==); 
    background-repeat: no-repeat; 
} 

L'image gif est codé en base64 en utilisant http://www.motobit.com/util/base64-decoder-encoder.asp

il fonctionne très bien, si je lie l'image de la façon habituelle:

li.box_entry { 
    background-image: url(images/dot.gif); background-repeat: no-repeat; 
} 

Cependant, il est juste un petit fichier et je veux réduire les requêtes HTTP, c'est pourquoi je suis en train de le charger droit dans le fichier CSS, qui devrait être plus rapide, bien que le fichier devienne plus grand en raison de l'encodage en base64.

Les images en ligne fonctionnent très bien pour moi dans HTML, comme dans cet exemple:

<a href="index.php?mod=home&amp;language=es"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI 
WXMAAAsTAAALEwEAmpwYAAAAMklEQVR42mP8//8/AzUBEwOVweA3kPE/A8P/keVlFup6eEQmmxFo 
IAsD48grHEZcAQsAaegJIuin2YEAAAAASUVORK5CYII=" alt="es" title="Español" width="20" height="20" border="0" /></a> 

Selon cette page cela devrait aussi fonctionner dans des fichiers CSS: http://www.websiteoptimization.com/speed/tweak/inline-images/

Cependant, je l'ai testé avec Google Chrome et Firefox et pas.

Ai-je raté quelque chose?

Voici la page que je travaille sur: http://lansuite.orgapage.de Les drapeaux dans le coin inférieur gauche fonctionnent déjà en ligne HTML Les points gris/jaune sur toute la page apparaissent cependant plusieurs fois. C'est pourquoi ce n'est pas une bonne idée de les écrire en HTML. Je préfère ne définir le graphique qu'une seule fois dans le fichier CSS et charger la classe appropriée chaque fois que j'ai besoin de l'image.

Answer 1

Je viens de trouver, le problème était l'encodeur base64: -/

je maintenant utilisé celui-ci, il a produit un code différent pour l'image GIF et cela a fonctionné: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

Tanks pour les réponses!

Answer 2

Assurez-vous de lire this à travers. Il couvre de nombreux aspects du sujet (comme le support IE).