First let me note that this technique will not work on IE6 (fixed positioning is not supported) or with with Active X disabled in IE6 or 7 (IE CSS transparency is Active X based). Fortunately we can degrade gracefully in those instances.

By layering a repeating horizontal gradient image:

With a repeating vertical gradient image:

And You get a diagonal gradient image:

To which you can also add another layer of texture or any other image to blend with your gradient:

For a full example please see the current version of my site which, at least for now, sports a subtle textured gradient (on some screens it's more subtle than others) .

So how do we set the diagonal gradient as the background of our site?

1. We'll create the background as a series of nested divs containing each background layer at the appropriate opacity(transparency) level. The background needs to be set at a fixed position 1,1 with height and width at 100%.
2. Though fixed positioning fails in IE6, it doesn't fail cleanly. For the most part your body element background will be showing (I recommend setting it to a vertical gradient). Unfortunately a small amount of our diagonal gradient will appear at the top of the screen. In my current design this isn't very noticeable , but you can either absolute positioning an element over it or set your body background to blend in with it. (Sorry to not be more helpful, but I don't currently have a way to test IE6 at home).
3. Because IE relies on an Active-X control to handle opacity processing we need to add an additional layer with an appropriate background and an opacity level of zero. When Active-X opacity(transparency) is working this layer is invisible. But when Active-X opacity is disable this layer will no longer be hidden and because it's the topmost layer it will be the only layer visible.

The html for this is extremely simple:

<div class='LayeredBackground'>
<div><div><div><div>
</div></div></div></div>
</div>

And here's the CSS:

div.LayeredBackground{
background:#222;
position:fixed;
top:1px;
left:1px;
z-index:-1;
width:100%;
height:150%;
}
div.LayeredBackground div{
width:100%; height:100%;
background: #003 url(http://web.coderenaissance.com/GradientVertical.jpg) repeat-x;
filter:alpha(opacity=50);
opacity:.5;
}
div.LayeredBackground div div{
width:100%; height:100%;
background: #003 url(http://web.coderenaissance.com/GradientHorizontal.jpg) repeat-y;
filter:alpha(opacity=55);
opacity:.55;
}
div.LayeredBackground div div div{
width:100%; height:100%;
background: #003 url(http://web.coderenaissance.com/TextureSmall.jpg) repeat;
filter:alpha(opacity=20);
opacity:.2;
}
div.LayeredBackground div div div div{
width:100%; height:100%;
background: #000;
filter:alpha(opacity=0);
opacity:0;
}

That's about it. I hope you enjoy this new technique (well, as far as I know it's new anyway). I hoping that some of the high end web designers/bloggers (eightyone design, freelance switch, blueflavor, web design ledger) will grab hold of this and my other image layering post and take these techniques to the next level. I can't wait to see what they can do with this. Come on guys, consider it a challenge.