Home/ Questions/Q 4273852
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T07:46:06+00:00

I’ve seen on some sites that you can include images in CSS using a

  • 0

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 😀

I was wondering how can I include a transparent 1×1 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s called the The data URI scheme

    Use the Data URI Kitchen to convert just about anything to data uri’s. Link:
    http://software.hixie.ch/utilities/cgi/data/data

    • 0