| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .covers { |
| /*data URI of full green 97x43 PNG*/ |
| background: red url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAAArCAIAAADnp3H+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREiYUszPbTwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABOSURBVGje7dAxAQAACAOgaXKj28DbAyJQmXBrBY4cOXLkyJEjHDly5MiRI0eOcOTIkSNHjhzhyJEjR44cOXKEI0eOHDly5AhHjhw5emMB9PAA1iv0hcsAAAAASUVORK5CYII=") repeat; |
| border: 5px solid gray; |
| margin: 10px; |
| } |
| .containsWide { |
| /*data URI of full green 110x49 PNG*/ |
| background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAAxCAIAAAC04QuOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREx4TOwqYIAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABXSURBVGje7dAxAQAACAOgaXKjW8LDAyJQmXCiFahUqRKVKlWqRKVKlahUqVIlKlWqRKVKlSpRqVIlKlWqVIlKlSpRqVKlSlSqVIlKlSpVolKlSlSqfGkBDtoA4vMqI7YAAAAASUVORK5CYII=") repeat-y; |
| border: 5px solid gray; |
| margin: 10px; |
| } |
| .containsTall { |
| /*data URI of full green 50x22 PNG*/ |
| background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAWCAIAAAANYFjGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREx8PNhD1LgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAqSURBVEjH7c4xAQAACAOgaXKjW8LDAxJQmTzUiZaWlpaWlpaWlpaW1pUFpt8ArH8g1RcAAAAASUVORK5CYII=") repeat-x; |
| border: 5px solid gray; |
| margin: 10px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="covers" style="width: 120px; height: 50px;"></div> |
| <div class="covers" style="width: 50px; height: 120px;"></div> |
| <div class="containsWide" style="width: 150px; height: 49px;"></div> |
| <div class="containsTall" style="width: 50px; height: 50px;"></div> |
| </body> |
