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?

Solution 1

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

Solution 2

data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

Nothing wrong with doing this, you save an HTTP round-trip. The only downside is that it doesn't work in older versions of IE (IE8, I believe, started to support it)

Solution 3

this is a transparent GIF of one pixel

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

Solution 4

Depending on the browsers you need to support you might be better off using rgba(). I know this question is a little old.

body {
  background-color: rgba( 0, 0, 0, .5 ); 
}

Solution 5

Up-to-date browser support details for data URIs:

http://caniuse.com/#feat=datauri

View more solutions

Comments

[Sophie Alpert]

Unless there's something I'm not aware of, there's no reason to use a spacer gif as a CSS background image.

[Alex]

Hi Ben. I'm trying to make the line numbers here unselectable: jsfiddle.net/rVwqR

[Shaz]

@Alex: Yes, that's because the image is transparent no? Either way, once you convert, copy the url in the address bar. Should start with data.

[Shaz]

@Alex: Make sure Base64 is checked on the page I linked to above if you want to use Base64 (it's usually shorter that what it normally gives if it's unchecked);)

[Alex]

thanks. it's still big, but I removed the metadata added by photoshop and it's small now. but it I can only disable selection under this image in FF and chrome. Opera still is able to select :x