Search code examples
cssimagepngembedded-resource

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.

Solution

  • 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..." />