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) {
  2.  
  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;?>" />

Blog: 

Kommentare

I am highly interesed in your tutorial. Unfortunately the last screenshot is missing. I've tried to insert a background by myself.

However this code doesn't work.
<body style="background-image: url("<?php print $background_image ?>");background-repeat: repeat-y;">

What can I do?

thanks for any kind of replies.

Hello,

I have fixed the problem. Sorry for that.
In your code you have an underline in $background_image, but the variable was set without,
so you should try this:

  1. <body style="background-image:url(<?php print $base_path.$backgroundimage;?>)">

I hope this helps.

Regards, schnere

Thanks your super fast reply. Indeed removing underscore solved the issue! Perfect. It's working like a charm

Is there no possibility to use some different style attributes on specified pages?

Is this page german or english?

Hi,

you could add a CCK-Field containing css attributes in theme same way as the image field adds the image-path.

This page is german including some english content.

http://schnere.bveml.net/en/node/26

Can I get some clarification on the last section,

"Theme files edit
Must then also in the theme settings are still taken to display the desired wallpaper. This file template.php edit (or create): function mytheme_preprocess_page (& $ variables) {/ / background image $ node = $ variables ['node'], $ variables ['background image'] = $ node-> field_background_image [0] ['filepath']; unset ($ node-> content ['field_background_image']) / / do not show background image in content} [/ php] The name of the function, of course, be adapted accordingly: with mytheme the appropriate theme to replace. Finally, it's the background image into the page template in the file page.tpl.php also be inserted. The path to the image is formed by the following code:. [Php] print $ base_path $ background image; [/ php] "

It looks as though you just copy and paste all text into the template.php file. Then on further inspection it has more instructions within it? If there are more than one file to edit, plus terms throughout that need changing for certain reasons, can you please state these more clearly as I only have limited knowledge (html) and I'm having trouble distinguishing code from instruction.

Hope you can help, thank you in advance.

Pete

Hello,

the version you have seen before was just an auto-translation test. Because of your comment I decided to create a quick manual translation. The second file to edit is page.tpl.php where you have to edit html to place your background image.

Neuen Kommentar schreiben