multiple images and gradients

HTML

<div class="webkit"></div>
<div class="moz"></div>
<div class="o"></div>
<div class="all"></div>

CSS

BODY {
    background-color:#999;
    }
DIV {
    float:left;
    margin:20px;
    width:250px;
    height:250px;
    background-color:#FFF;
    }
.webkit {
    background-image:
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABlBMVEX/AAD///9BHTQRAAAAAnRSTlP/AOW3MEoAAAAjSURBVHja7cuxDQAACAMg+//TfmAcO8DO0C1viqIoiqIohwXD5gblKXMdrwAAAABJRU5ErkJggg==),
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAsSURBVHja7dIhDgAADMJA9v9PT2ARk0toLTmHJiWXRwgEUkroZe23hEAgZ7JdgAblEnZzPgAAAABJRU5ErkJggg==),
    -webkit-linear-gradient(#fff, #000);
    }
.moz {
    background-image:
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABlBMVEX/AAD///9BHTQRAAAAAnRSTlP/AOW3MEoAAAAjSURBVHja7cuxDQAACAMg+//TfmAcO8DO0C1viqIoiqIohwXD5gblKXMdrwAAAABJRU5ErkJggg==),
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAsSURBVHja7dIhDgAADMJA9v9PT2ARk0toLTmHJiWXRwgEUkroZe23hEAgZ7JdgAblEnZzPgAAAABJRU5ErkJggg==),
    -moz-linear-gradient(#fff, #000);
    }
.o {
    background-image:
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABlBMVEX/AAD///9BHTQRAAAAAnRSTlP/AOW3MEoAAAAjSURBVHja7cuxDQAACAMg+//TfmAcO8DO0C1viqIoiqIohwXD5gblKXMdrwAAAABJRU5ErkJggg==),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAsSURBVHja7dIhDgAADMJA9v9PT2ARk0toLTmHJiWXRwgEUkroZe23hEAgZ7JdgAblEnZzPgAAAABJRU5ErkJggg==),
        -o-linear-gradient(#fff, #000);
    }
.all {
    background-image:
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABlBMVEX/AAD///9BHTQRAAAAAnRSTlP/AOW3MEoAAAAjSURBVHja7cuxDQAACAMg+//TfmAcO8DO0C1viqIoiqIohwXD5gblKXMdrwAAAABJRU5ErkJggg==),
   ...