How to insert an image inside a CSS file?

Question

Navigation

#1 by (10 votes)
#2 by (6 votes)

6

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?

html5 css3 webdesign base64 data-uri

asked by anonymous 13.12.2013 / 19:46

2 answers

6

There are sites to do this type of encoding.

An example: link

I think it's worth referring to a post in Stackoverflow about whether or not it's a good idea to insert a base64 encoded image.

13.12.2013 / 19:51

score 10 · Accepted Answer

This construction is called data URI , it is a way of embedding data into a webpage as if it were external resources .

Follow the format:

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

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

In the example image/png is the MIME-type; 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 am not mistaken these are the only encodings allowed.

Q.:

There are a number of online services that perform this coding such as SpriteBaker.com , DataURL.net or Base64-image.de .
I will not go into detail, as this is not the purpose of the question, but consider advantages and