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?

Unless there's something I'm not aware of, there's no reason to use a spacer gif as a CSS background image. — Sophie Alpert, Apr 07 '11 at 21:50
Hi Ben. I'm trying to make the line numbers here unselectable: http://jsfiddle.net/rVwqR/ — Alex, Apr 07 '11 at 21:51
Just prevent selection like this via CSS; no background image needed: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4407335#4407335 — Sophie Alpert, Apr 07 '11 at 21:53
See also [smallest filesize for transparent single pixel image](http://stackoverflow.com/questions/2570633/smallest-filesize-for-transparent-single-pixel-image) — user, Mar 07 '14 at 17:59

score 15 · Accepted Answer · answered Apr 07 '11 at 21:47

15

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

answered Apr 07 '11 at 21:47

Shaz

15,637
3
41
59

@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 Apr 07 '11 at 22:04
@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);) – Shaz Apr 07 '11 at 22:11
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 – Alex Apr 07 '11 at 22:18

score 14 · Answer 2 · 2011-04-07T22:18:44.590

14

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)

edited Apr 07 '11 at 22:18

answered Apr 07 '11 at 21:48

score 8 · Answer 3 · edited Sep 26 '13 at 11:02

8

this is a transparent GIF of one pixel

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

edited Sep 26 '13 at 11:02

Rajeev Ranjan

4,152
3
28
41

answered May 18 '12 at 05:21

rushkeldon

1,343
1
10
13

score 2 · Answer 4 · answered Sep 26 '13 at 11:13

2

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 ); 
}

answered Sep 26 '13 at 11:13

Bill Criswell

32,161
7
75
66

score 1 · Answer 5 · answered Sep 26 '13 at 11:04

1

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

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

answered Sep 26 '13 at 11:04

callum

34,206
35
106
163

CSS transparent background image using "data:"

5 Answers5