<!DOCTYPE html>
<style>
.bg {
display: inline-block;
margin: 10px;
width: 33px;
height: 33px;
background-color: red;
/* 99x99px green/red checkerboard (3x3 tiles) */
background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjCAIAAAAAWSnCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcWEAYigt4gYwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACoSURBVHja7dyxDQAgCEVBvvvvrBvYQcO9BYgXSmLqVnc37SPS/4pTIkWKFClSpESKFClSpEiJFClSpEiRIiVSpEiRIkVKpEiRIkWK1M4GTrQmZgwcs9kpUqRIkSJFSqRIkSJFipRIkSJFihQpUiJFihQpUqREihQpUqRIbS3+NLNTpEiRIkVKpEiRIkWKlEiRIkWKFClSIkWKFClSpESKFClSpEiR0rcHwFgJwTzTOUwAAAAASUVORK5CYII=);
}
.bg1 {
background-position: 0px 0px;
}
.bg2 {
background-position: 0px -66px;
}
.bg3 {
background-position: -33px -33px;
}
.bg4 {
background-position: 0px -66px;
}
.bg5 {
background-position: -66px -66px;
}
</style>
<body style="width: 500px">
<div style="transform: scale(0.5, 0.5); transform-origin: top left;">
<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="bg bg4"></div>
<div class="bg bg5"></div>
</div>
<div style="transform: scale(0.75, 0.75); transform-origin: top left;">
<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="bg bg4"></div>
<div class="bg bg5"></div>
</div>
<div>
<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="bg bg4"></div>
<div class="bg bg5"></div>
</div>
<div style="transform: scale(1.25, 1.25); transform-origin: top left;">
<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="bg bg4"></div>
<div class="bg bg5"></div>
</div>
<div style="transform: scale(1.5, 1.5); transform-origin: top left;">
<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="bg bg4"></div>
<div class="bg bg5"></div>
</div>
</body>