multiple instances same data url image

Question

How do you re-instantiate an already declared base64 data url image without having to re-insert the base64 code on the same page?(preferably with css)

I tried:

<html><head>
    <style type="text/css">
        img.wink { width:15px; height:15px;
            src:"data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=";
        }
    </style>
</head><body>
    <h1>Hello</h1>
    <img class="wink"/>, and just to test my sanity <img width="15px" height="15px" src="data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=" alt=";)"/>.
</body></html>

Josh Stodola · Answer 1 · 2010-10-29T19:53:04.087

6

src is not a valid CSS property. You need to use content for this...

img.wink  {
  content: url(data:image/gif;base64,BLAH_BLAH_BLAH);
  height: 15px;
  width: 15px;
}

It works: Live Demo

edited Oct 29 '10 at 19:53

answered Oct 29 '10 at 19:31

Josh Stodola

81,538
47
180
227

I believe you that it works, but in what browser(I am insane)? I'm using Firefox in Ubuntu Lynx. – GlassGhost Oct 29 '10 at 19:41
@GlassGhost I am using Chrome – Josh Stodola Oct 29 '10 at 19:44
this is funny(currently) chrome is working with this question while only firefox has http://stackoverflow.com/questions/2710284 working. I want to give you that check mark so bad!!! if only mozilla shined at this moment – GlassGhost Oct 29 '10 at 19:49
@Glass Haha, but it's really not funny -- why can't these damn browsers just get along?! – Josh Stodola Oct 29 '10 at 19:51
@Josh If only stack overflow would let me give you a half checkmark, maybe mozilla will fix this in an update. – GlassGhost Oct 29 '10 at 19:56
@Glass I don't think it is a good idea to mark this as the answer. Thanks for the rep, but I am more concerned about somebody looking for this solution in the future. In my opinion, this is not a "solution" since it only works in one browser. – Josh Stodola Oct 29 '10 at 19:58
@Josh roger that, maybe we could some how report this to mozilla? I did just get a new update ;) – GlassGhost Oct 29 '10 at 20:05
@Glass Yeah it is definitely a part of the CSS3 spec (still a working draft at this point): http://www.w3.org/TR/css3-content/#inserting3 – Josh Stodola Oct 29 '10 at 20:32
Josh, I forked you and made it more like a normal img tag, what do you think? http://jsfiddle.net/resistdesign/jgsn55rs/ – Resist Design Nov 22 '14 at 02:59

score 3 · Answer 2 · answered Oct 29 '10 at 19:19

3

That CSS is not correct, make the data the URL in the background-image, then you can reference it by class.

<html>
<head>
    <style type="text/css">
        div.wink  
        {
            width:15px; 
            height:15px;
            background-image: url('data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=');
        }
    </style>
</head>
<body>
    <h1>Hello</h1>
    <div class="wink"></div>
    <br/>
    and just to test my sanity 
    <div class="wink"></div>.
</body>
</html>

answered Oct 29 '10 at 19:19

Dustin Laine

37,935
10
86
125

You could use any element, but using a background on an `image` element is not what he needs. To reuse that single image, it needs to be done through CSS. – Dustin Laine Oct 29 '10 at 19:24
@Dustin No, you aren't catching my drift. See my answer please. – Josh Stodola Oct 29 '10 at 19:31
I like the approach, but I have not been able to get that to work cross-browser. I would prefer to use that than BG image. – Dustin Laine Oct 29 '10 at 19:44
@Dustin very good answer almost, but Joshes is looking better(will be accepted if I manage to get it working) – GlassGhost Oct 29 '10 at 19:46
1

@Glass It appears that my solution will not work in most browsers. I use Chrome, and it worked there so I assumed it would be good in Firefox and possibly IE9. I am afraid that using background images is going to be the most cross-browser-friendly solution. – Josh Stodola Oct 29 '10 at 19:49
@Josh, I have not see much on the compatibility. Too bad, much more elegant. – Dustin Laine Oct 29 '10 at 19:55

score 1 · Answer 3 · answered Oct 29 '10 at 19:25

try this:

<html><head>
    <style type="text/css">
        div.wrapper  {
            background-image: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
            width:15px; height:15px;
        }

</style>
</head><body>
    <h1>Hello</h1>
    <div class="wrapper">
    <br/>
</body></html>

IE 8, Firefox 2 and 3, Safari, Mobile Safari (iPhone browsers), and Google Chrome support embedded binary image data in CSS files. IE 6 and 7 does NOT.

read more here: http://mark.koli.ch/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html

score 0 · Answer 4 · answered Oct 29 '10 at 19:19

if images don't bring semantic to the document you could just define the base64 url as a background of an element without using <img> by CSS

Otherwise you could save the base64 string in a server-side variabile, then put the src placing that variable wherever it needs

if you cannot use a server-side language you could still use javascript (but it's better no to rely on scripts for content accessibility), just use a snippet on domready like so:

var img = document.getElementsByTagName('img'),
    len = img.length;
while (--len) { 
    if (-1 < img[len].className.indexOf('wink'))
        img[len].src = 'data:image/.gif;base64,..."; 
}

multiple instances same data url image

4 Answers4