CatsWhoCode nos presenta una interesante forma de diseño. Se trata de mostrar una imágen de fondo (ó background image) en movimiento horizontal continuo gracias a jQuery.

Puedes ver el resultado final aquí.  El código probado y comproado se muestra a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fondo animado</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="screen">
 body{
 background-color: #C0DEED;
 margin:0;
 padding:0;
 }

 #header{
 height:180px;
 background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
 text-align:center;
 margin-top:-30px;
 }

 #header h1{
 padding-top:35px;
 font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
 color:white;
 font-size:45px;
 }

 #content{
 background-color:#fff;
 height:500px;
 width:980px;
 margin:25px auto 0 auto;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 }
</style>

<script type="text/javascript" charset="utf-8">
 var scrollSpeed = 70;
 var step = 1;
 var current = 0;
 var imageWidth = 2247;
 var headerWidth = 800; 

 var restartPosition = -(imageWidth - headerWidth);

 function scrollBg(){
 current -= step;
 if (current == restartPosition){
 current = 0;
 }

 $('#header').css("background-position",current+"px 0");
 }

 var init = setInterval("scrollBg()", scrollSpeed);
</script>

</head>

<body>
<div id="container">
 <div id="header">
 <h1>Animated Background Image</h1>
 </div><!-- #header -->

 <div id="content">
 <!-- Your content will go here -->
</div><!-- #content -->
</div><!-- #container -->

</body>
</html>

Link Animated background image with jQuery