<!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 111x49 PNG*/
background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG8AAAAxCAIAAABbI2CwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gYaExUMB9/lZAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAV0lEQVRo3u3QMQEAAAgDoGlyo1vBwxMiUJnwpRXYtGkTmzZtYtOmTZvYtGkTmzZtYtOmTZvYtGkTmzZt2sSmTZvYtGkTmzZt2sSmTZvYtGnTJjZt2uRgAXUQAOIbvIVlAAAAAElFTkSuQmCC") repeat-y;
border: 5px solid gray;
margin: 10px;
}
.containsTall {
/*data URI of full green 50x23 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>