How do I automatically change the background image of body? How do I automatically change the background image of body, when I click on a menu link?

I want to obtain the same effect shown in the Drupal Design Camp Boston 2011 site.
This is the code that is added directly to the page and is not part of a seperate script.

&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
jQuery(document).ready(function () { $('body').css( 'background-image', 'url("/sites/default/files/palm1.jpg")' ) });
//--&gt;&lt;!]]&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
jQuery(document).ready(function () { $('body').css( 'background-color', '#2a2f1d' ) });
//--&gt;&lt;!]]&gt; 


The place where you want do this is inside your theme's template.php file under the function MYTHEME_preprocess_page(&amp;$variables)

then add something like

$script_bg_img = "jQuery(document).ready(function () { $('body').css( 'background-image', `url('/sites/default/files/palm1.jpg')` ) });"
drupal_add_js($script_bg_img);


or put the javascript in a separate file, then add
   drupal_add_js(PATH_TO_FILE . '/FILENAME');