jeph perro jeph perro - 4 months ago 14
CSS Question

How to view embedded image in a CSS file

I came across this background image in a CSS file.

How can I view it?

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAB3CAYAAACQTRce
AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgR
mlyZXdvcmtzIENTNXG14zYAAAmZSURBVHic7Zt/bB... BIG SNIP ...V3JGCkIKVIQUqQgpEhBSJGCk
CIFIUUKQubZCELm2QhC5tkIQubZCELm2QhC5tkIQubZCELm2QhC5tkIQubZFEno2LWC+6Jkno0g5HdtQU
iRgpAiBSFFCkKKFIQUKQiV3FYMycK4oysVeOVuBSQOF8i5KojcjC8IGSMFIUUKQooUhBQpCClSEFKkIKR
IQUiRgpAiBfFfWn5d1Y2PJI0AAAAASUVORK5CYII=)


I tried to paste everything between
"iVBOR..."
and
"5CYII="
in a file and renamed it
image.png
- but that didn't work.

Answer

If you paste everything from "data: ..." through the = into the Firefox address bar it will draw it for you.

Or put something like this into your HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
Comments