I came upon a situation today where I had two different images I wanted to use for my background.

The first was a gradient, with a grid-line pattern overlayed.  Normally I would  just make the background color match the ending color of the gradient and problem solved.  But in this case I have the gridlines suddenly stopping on long pages.

I could have just made an extremely "tall" image, but that would be unreasonable and inflexible, since page height has no limit.

Instead, what I wanted to do is have another image that I could tile which has the same pattern as the gradient background, but was just a solid color, matching the end of the gradient.

To solve this problem, I set the background of the HTML element to be the solid-colored image and set the background of the BODY element to be the gradient.  Be sure to leave the background color of the BODY blank, or it will cover the HTML background.

Here is the code:

html
{
    background: #003366 url('background2.gif') repeat;
}



body
{
    background-image:    url('background1.jpg');
    background-position: top left;
    background-repeat:   repeat-x;
}