I am trying to upload a gif file to my .css file, for example:
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;
}
The gif image is encoded by base64 using
http://www.motobit.com/util/base64-decoder-encoder.asp
It works fine if I associated the image with the usual way:
li.box_entry {
background-image: url(images/dot.gif); background-repeat: no-repeat;
}
However, this is just a small file, and I want to reduce HTTP requests, so I'm trying to load it directly in the CSS file, which should be faster, although the file is getting larger due to base64 encoding.
Inline images work fine for me in HTML, as in this example:
<a href="index.php?mod=home&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>
According to this page, this should also work in CSS files:
http://www.websiteoptimization.com/speed/tweak/inline-images/
However, I tested with Google Chrome and Firefox, but it is not.
Did I miss something?
, :
http://lansuite.orgapage.de
HTML
/ . HTML. CSS , .