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.

  • 1
    Like to note that the site, the images are random.
    – iStryker
    Aug 4, 2011 at 16:23

1 Answer 1


This is the code that is added directly to the page and is not part of a seperate script.

jQuery(document).ready(function () { $('body').css( 'background-image', 'url("/sites/default/files/palm1.jpg")' ) });
<script type="text/javascript">
jQuery(document).ready(function () { $('body').css( 'background-color', '#2a2f1d' ) });

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

then add something like

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

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.