How to insert an image inside a CSS file?
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?
2 answers
This construct is called data URI, it 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 has been omitted; and finally base64 indicates that the content is encoded in (Guess) base 64.
If omitted the ;base64 ASCII encoding is assumed. if I'm not mistaken these are the only encodings allowable.
P.S.:
- There are a number of online services that perform this encoding like SpriteBaker.com, DataURL.net or Base64-image.de .
- I will not go into detail, as this is not the point of the question, but consider the advantages and disadvantages of using this technique.
There are sites to do this type of encoding.
An Example: http://www.base64-image.de /
I think it's worth mentioning a post in Stackoverflow on whether or not it is a good idea to insert a base64 encoded image.