Background Gradient CSS2.0 for IE6-IE8

Here is a simple demo of integrating a background gradient using a multi-strip div and then giving them a z-index so that they never interfere with the actual elements on the page. They are absolutely positioned so as to not hinder anything on the page and will be added during the run time or can be kept just as a simple HTML snippet .

by shivkumarganesh

HTML

<div id="background">
<div id="top">
<table id="top">
    <tr>
        <td></td>
    </tr>
</table>
</div>
<div id="middle">
<table id="middle">
    <tr>
        <td></td>
    </tr>
</table>
</div>
<div id="bottom">
<table id="bottom">
    <tr>
        <td></td>
    </tr>
</table>
</div>
</div>

CSS

div#background
{
    width:100%;
    height:100%;
    z-index:-400;
}
div#top
{   
   
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
    height:30%;
    width:100%
}
div#middle
{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#8CBF20',GradientType=0 );
    height:40%;
    width:100%
}
div#bottom
{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8CBF20', endColorstr='#7db9e8',GradientType=0 );
    height:30%;
    width:100%
}
div#main
{
width:100%;
    height:100%;
}
table#top
{
    width:100%;
    height:300px;
}
table#middle
{
    width:100%;
    height:200px;
}
table#bottom
{
    width:100%;
    height:300px;
}