This code allows you to stretch background images when you page expands to provide a better user experience.
Vertically Stretch Background Image
HTML
<link href="/global.css" rel="stylesheet" type="text/css" />
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header" colspan="2"> </td>
</tr>
<tr>
<td class="top"> </td>
<td> </td>
</tr>
<tr>
<td class="middle"><img src="/middle.jpg" alt="background image" id="bg" /></td>
<td> </td>
</tr>
<tr>
<td class="bottom" colspan="2"> </td>
</tr>
</table>
CSS
.top {
width: 130px;
height: 143px;
background: black url('top.jpg') left top no-repeat;
}
.middle {
width: 130px;
height: 100%;
/* background: url('middle.jpg') no-repeat; */
background-size: 100%;
}
td.middle img#bg {
width:100%;
height:100%;
}
.bottom {
height: 59px;
background: #fff url('bottom.jpg') left top no-repeat;
}
Although this code is rigged using tables the method can easily be changed to use <div> .
Click here for a demo of this code