Multiple base64 files in one

Question

Can you combine these 2 images into one external file on this JS fiddle and link to them as images?

Something like

Answer 1

Use an image array. This requires no javascript, only HTML and CSS.

First, use a graphics editor (e.g. GIMP) to stitch your pictures together into one single big picture.

Then use CSS attributes (width, height, background-position) to crop the image on the fly. does not support this, but background images do.

.iconarray
{
    display: block;
    background-image: url(iconarray.png);
    background-repeat: no-repeat;
}

.icon1
{
    width: 64px;
    height: 64px;
    background-position: 0px 0px;
}

.icon2
{
    width: 64px;
    height: 64px;
    background-position: 0px -64px;
}

Use the CSS classes in a :

Demo: http://jsfiddle.net/rFTpL/

Kudos go to:

• http://www.guistuff.com/css/css_imagetech1.html
• How can I display just a portion of an image in HTML/CSS?