| <!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> |
