index.html

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<style type="text/css" media="screen">

			/* Give the header a height and a background image */
			#header{
				height:150px;
				background: #000 url(FTLogoTwitter.v14.jpg) repeat-y scroll left top;
				text-align:center;
			}

		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
			</div>
	</div>
	</body>

	<!-- Import jQuery-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70;        // Speed in milliseconds
var step = 1;               // How many pixels to move per step
var current = 0;            // The current pixel row
var imageHeight = 4300;     // Background image height
var headerHeight = 300;     // How tall the header is.

//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);

function scrollBg(){

    //Go to next pixel row.
    current -= step;

    //If at the end of the image, then go to the top.
    if (current == restartPosition){
        current = 0;
    }

    //Set the CSS of the header.
    $('#header').css("background-position","0 "+current+"px");


}

//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);

	</script>

</html>