How do I set a node/page's background image to that content's image?

Question

I've installed both 'Background Image' and 'Dynamic Background' but am having trouble trying to configure them for my situation. In the website I am trying to edit, there are content types of 'Performer,' 'Venue' among others. Now each content type has an image as one of their fields and I would like to have that image as the background image for that content's page.

Background Image only gives me option to do this for 1 content type, and when I tried setting it up, nothing appears.

I'm pretty sure I could do this with Dynamic Background, but the process would be really inefficient; I would have to add the pictures again to Dynamic Background's library.

So is there another way to do this? Or what can I do with Background Image to make it work?

Answer 1

This can be done without installing extra modules:

1. Add an image field in the content types you want to enable a dynamic background image.

2. Use this code: template.php:

   function THEME_preprocess_page(&$vars) {
       if (!empty($vars['node'])) {
           $node = $vars['node'];
           if (!empty($node->field_background_image)) {
               $image = file_create_url($node->field_background_image[LANGUAGE_NONE][0]['uri']);
               $vars['background_image_css'] = 'style="background: url(' . $image . ') no-repeat scroll center center / cover #FCFCFC;"';
           }
   }
   }
   

Add this in your div#content in page.tpl.php: print (!empty($background_image_css)) ? $background_image_css : ''; ?>

Updated version: template.php:

function THEME_preprocess_page(&$vars) {
 $node = menu_get_object('node');
 if (!empty($node) && !empty($node->field_background_image)) { 
        $image = file_create_url($node->field_background_image[LANGUAGE_NONE][0]['uri']); 
        drupal_add_css('div#content {background: url(' . $image . ') no-repeat scroll center center / cover #FCFCFC; }', array('type' => 'inline'));
 } 
}

Answer 2

Background Image is using a content-type as some kind of interface for "global" background-images. So if you want to tie your backgrounds to nodes, i recommend the BackgroundField module.

BackgroundField started as an extension of the CCK ImageField that allows a CSS selector and background attributes to be set for a content-type. This is particularly helpful for allowing your node authors to add images to a node that are integrated into the theme of the site. With the inclusion of the Image field in Drupal 7, BackgroundField was rewritten to extend that core functionality.