You are here:Home»KB»Web Design»HTML»Dynamically stretch background images
Sunday, 22 February 2015 20:38

Dynamically stretch background images

Written by

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">&nbsp;</td>    
  </tr>
  <tr>
    <td class="top">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="middle"><img src="/middle.jpg" alt="background image" id="bg" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="bottom" colspan="2">&nbsp;</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

Links

Read 865 times Last modified on Sunday, 22 February 2015 20:53