CSS transparent background image using "data:"

Question

I've seen on some sites that you can include images in CSS using a "data" keyword:

.stuff {
  background: transparent url(data:image/gif;base64,SOMEWEIRDCODEHERE) repeat center top;
}

the weird code looks like a base64 ecoded string like:

R0lGODlhMwAxAIAAAAAAAP/// yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==

look pretty cool :D

I was wondering how can I include a transparent 1x1 pixel GIF like this? Does anyone know the data code for such a image?

Is it a good idea to do this for small and very common images? Do all browsers support this?

Answer 1

this is a transparent GIF of one pixel

background-image: url( data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== );