A Wikipedia background like (HOW?)

Subscribe to A Wikipedia background like (HOW?) 9 posts, 2 voices

 
simon! Scriptwright

Hi, I'm using Explode Thumbs & Instant Gallery and I these got a plain/simple background.

I want to recognize if a .GIF or a .PNG icon/image has a "transparent color"
How to replace this plain background with a square/slot one?

example here

TIA (thanks in advance).

 
znerp Scriptwright

Well in that link you posted, wikipedia does it as follows;

img {
  background:transparent url(http://upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat scroll 0% 0%;
}

 
simon! Scriptwright

where to insert this 16x16 image in the code?

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC

 
znerp Scriptwright

If I'm understanding you correctly, simply replace the url for the image with that string.

 
simon! Scriptwright

Explode Thumbs:
Line 46 background = 'white';

Instant Gallery:
Line 210 bigimg.style.background = 'red';

 
znerp Scriptwright

I'm not 100% that I'm with you here, but..

background = 'transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC") repeat scroll 0% 0%';
... and similarly with the second one.

 
simon! Scriptwright

Thank you SO MUCH znerp, It is working :)

But I still can't get http://upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png from the page source??
How did you locate it?

 
znerp Scriptwright

You mean where did I find that line of css? I would guess it's in a separate file, so you won't find it easily in the source. I used the Firebug extension to find it.

 
simon! Scriptwright

you can get this "css line" with Adblock plus and Live HTTP Headers also.