Inline images in CSS with background-image: url ()

Question

I'm trying to load a gif file within my .css file, like this:

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 base64 encoded using http://www.motobit.com/util/base64-decoder-encoder.asp

It works fine, if I link the image the regular way:

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

However, it is just a small file and I want to reduce HTTP-requests, thats why I'm trying to load it right in the CSS file, which should be faster, though the file gets larger due to base64 encoding.

Inline images work fine for me within HTML, like in this example:

<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>

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 and it did not.

Am I missing something?

Here is the page that I'm working on: http://lansuite.orgapage.de The flags in the lower left corner already work as inline HTML The grey/yellow dots all over the page however appear multiple times. That is why it is not a good idea to write them as inline HTML. I'd rather like to define the graphic only once in the CSS file and load the appropriate class every time I need the image.

Answer 1

Make sure to read this through. It covers a lot of aspects of the topic (like IE support).