1

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?

3

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'));
 } 
}
|improve this answer|||||
  • 1
    Yes, but better to use hook_preprocess_html, menu_get_object('node') and drupal_add_css to add the CSS properly instead – David Thomas Apr 9 '14 at 9:49
  • Falco - your solution worked for me except in one case where I published a piece of content and set it 'promote to front page'. It seems to fail on this - !empty($node), where node is initialized with this - $node = menu_get_object('node'); - as per your code. Any ideas? – user36735 Oct 2 '14 at 21:53
0

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.

|improve this answer|||||
  • Thanks, BackgroundField seems to be the exact thing I need. Have you used it at all? I'm having trouble getting it to work and display the image I set as the background. Nothing shows up... – simplycoding Apr 17 '13 at 20:05
  • What have you done already? Don't forget to add a css class in the settings for the field of the image to which the image gets assigned. – Volker Apr 18 '13 at 9:57
  • Well, the content type or node already exists. I've tried using the module "Background Image" to set an image as the background, but nothing happens. I haven't tried using "Dynamic Background" because it seems very time consuming because the site will have a lot of pages/nodes. Any chance you could elaborate on what css class I should add? I haven't come across anything on Google suggesting a css class – simplycoding Apr 18 '13 at 17:47
  • This is pretty much how this conversation will be going: drupal.org/node/1824836 ;o) – Volker Apr 18 '13 at 21:14
  • Ha that is basically what I'm looking for, but my picture won't show up regardless of the CSS selector I choose. If I look at the page source, I don't see a URL that links to the image I'm trying to set as my background. And is the CSS selector based on what I put in my global.css file? – simplycoding Apr 19 '13 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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