Ok, first, three images are used:
http://www.backstreetboys.com//images/bg-4.gif
That is the background image of the body element. So, the entire body of the page is set to that image. It obviously tiles.
Next, we have:
http://www.backstreetboys.com//images/bg-4-gradient.gif
This provides the "fade" effect, and is the background of a div element named "main". The "main" div comes right after/under the body, and everything else is inside of it. The style is set to repeat horizontally, but not vertically. Thus this image marches across the top of the page.
[html]
<html>
<head>
<style type="text/css">
body {
background-image:url(../images/bg-4.gif);
background-position:top center;
}
#main {
background-image:url(../images/bg-4-gradient.gif);
background-position:top center;
background-repeat:repeat-x;
}
#globalWrapper {
background-image:url(../images/shadow-4.gif);
background-position:top center;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="main">
<div id="globalWrapper">
</div>
</div>
<body>
</html>[/html]
Lastly we have the image for the globalWrapper, another div after/under "main". It's too big to place here, but it's basically a "frame" for the page content, and isn't necessary for achieving the background effect.
To summarize: set the background of the "body" tag to your overall repeating pattern. Then place a div just under the body, and set its background to an image that is "darker" at the top, but is an exact match for the overall pattern at the bottom. Set it to repeat horizontally at the top of the page.
Unsolved 
Offline 
