Neuen Kommentar schreiben

Drupal 6 - different background images for pages

This howto describes the possibility to add different background images to differend Drupal6 nodes/pages. In the same way other layout images like header images can be changed by node settings.

Required modules

Following modules have to be installed. See project pages for installation howtos.

After installation activate the modules Content, FileField and ImageField.

Add field to content management

Now an image-upload field can be added to content management. Go to Administer->Content management->Content types and choose a content type.

Add fields:

drupal add field

After saving there will be further settings like a help text, permitted upload file extensions and the path where the images are stored possible to change. You may set background-images in Path settings -> File Path and set the Required checkbox in Global settings.

When you are done, you will see the field to upload your background image during creation/editing of your choosen node type:

drupal add bg image


Edit theme-files

Edit or create template.php to put the image filepath in a variable used by your template-file (page.tpl.php):

  1. function mytheme_preprocess_page(&$variables) {
  3.   // background image
  4.   $node = $variables['node'];
  5.   $variables['backgroundimage'] = $node->field_background_image[0]['filepath'];
  6.   unset($node->content['field_background_image']); // do not show background image in content
  7. }
Change mytheme to the name of your theme.

Finally the image has to be integrated in the template. Following code shows the path to your image:

  1. print $base_path.$backgroundimage;
Then implement it like you would implement any other background image:
  1. <!-- as background-image for body -->
  2. <body style="background-image:url(<?php print $base_path.$backgroundimage;?>)">
  3. <!-- or as img-tag -->
  4. <img src="/content/<?php print $base_path.$backgroundimage;?>" />