How to insert an image into a CSS file?

Question

I use a program here in the company that in its Web module it has its logo inserted directly in CSS something like:

#logo img{
  max-width:100%;
  background-image: 'data|base64=acSs....';
}

How do I create this kind of background myself?

Answer 1

This construction is called data URI, is a way to embed data into a web page as if it were external resources.

Follows the format:

data:<MIME-type>;charset=<encoding>;base64,<dados>

Example:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

In the example image/png is the MIME-type; the charset was omitted; and finally base64 indicates that the content is encoded in (guess) base 64.

If omitted the ;base64 is assumed encoding ASCII.If I’m not mistaken these are the only encodings allowed.

---

P.S.:

• There are a number of online services that perform this encoding as the Spritebaker.com, Dataurl.net or Base64-image.de.
• I will not go into detail, as that is not the point of the question, but consider perks and disadvantages to use this technique.

Answer 2

There are websites to do this kind of encoding.

An example: http://www.base64-image.de/

I think it’s worth mentioning a post in Stackoverflow (in English) on whether or not it is a good idea to insert an image encoded in Base64.