Matthew O'neill wrote a tutorial on Super-Easy Blendy Backgrounds:
Recently, while trying to implement a few different navigation ideas that a designer had thrown my way, I became frustrated with my weak image editing skills. The design was gradient-heavy, so a traditional approach to navigation markup and styling would require a dozen or so background-image slices to meet the varying colors and height requirements.
After spending a mortifying amount of time creating the images—I’m a programmer by trade, so anything more complicated than MS Paint gives me the willies—I had to take a step back and figure out a better way. What if, after finishing, I needed to tweak the height? Or, God forbid, the color palette? My head was going to explode if I had to open an image editor again, so the Super Easy Blendy Backgrounds technique was born.
The article follows the typical pattern of "hmm, well in IE 7 we found that you needed to do this" and walks you through all of the fixes (we won't say hacks).
They end up with:
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.box {
border: solid orange 2px;
float: left;
margin: 1px;
position: relative;
width: 165px;
padding: 5px;
}
.box * {
margin: 0px;
position: relative;
z-index: 1;
}
* html .grad {
filter: progid:DXImageTransform.Microsoft.AlphaImage »
Loader (src='grad_white.png', sizingMethod='scale');
}
* html .grad img {
display: none;
}
* html .box {
position:static;
}
.blue {
background-color: #2382a1;
}
.green {
background-color: #4be22d;
}
.pink {
background-color: #ff009d;
}
</style>
<!--[if IE 7]>
<style type="text/css">
.box {
border: solid red 2px;
height:2.5em;
}
</style>
<![endif]-->
