I'm trying to change the background image of my site based on what node the user is viewing (not just what node type, but specifically what node). I have added an image field to my node type called background image. Basically, I'm trying to go into my html.tpl.php file and inject a style right into the body tag, for isstance


I'm hoping to grab the image field from node that is loaded, but I'm having trouble figureing out hoe to access a nodes field from the html.tpl.php file (i need to do it from here becuase that's where the body tag is). I've added a pre-process function to my template to try and find the correct field, but i've hit a dead end

function mytheme_preprocess_html(&$vars) {

the array that is traced makes no sense to me, and I'm unable to find the field. Is there a better way to do this


The simplest (not necessarily the cleanest) way to do this is:

function mytheme_preprocess_page(&$vars) {
  $node = menu_get_object();
  if ($node->nid) {
    // We're on a node page
    if (isset($node->field_background_image[$node->language][0]['fid'])) {
      // Load the file object
      $file = file_load($node->field_background_image[$node->language][0]['fid']);

      // Get a web accessible URL for the image
      $path = file_create_url($file->uri);

      // Add the background to an inline CSS tag
      drupal_add_css('body { background:url(' . $path . ') left top no-repeat !important; }', 'inline');
  • thanks for your promt response, that makes sense, however I'm have some trouble menu_get_object(); does not seem to be returning anything. I try to dpm(); the node object, but I get nothing .... any idea? – user379468 Feb 10 '12 at 18:10
  • That's strange...if you're on a node page menu_get_object() will always return that node as an object...is there any chance you're calling this from a non-node page? Just to clarify a node page is one whose path (not URL alias) is, e.g. node/123 – Clive Feb 10 '12 at 18:17
  • ok, so I just moved it to the mytheme_preprocess_page which actually simplified everything because the node object is already available, and since it's injecting the CSS it doesn't really matter where it is processed (see response below) I'm not really sure why the menu_get_object was not working .... I'm using D7 and Omega as a base theme thanks again! – user379468 Feb 10 '12 at 18:28
  • Yeah that's a good point, I forgot you could still inject CSS in the node preprocess. Glad you got it sorted I'll updated the answer to reflect what you've found – Clive Feb 10 '12 at 18:30

Here was the function I used

function mytheme_preprocess_page(&$vars) {
    if (isset($vars['node']->nid)
        $uri = $vars['node']->field_background_image['und'][0]['uri'];
        $path = file_create_url($uri);
        drupal_add_css('body { background:url(' . $path . ') left top no-repeat !important; }', 'inline');

I tried to use the code above but could get no results. no errors but no results. I am using drupal 7 with the versatile HTML5 sub-theme of versatile. It may have had something to do with the theme but I doubt it. what I did to get it to work is change the function from mytheme_preprocess_page to mytheme_preprocess_node seeing as it is nodes we are pulling this from anyway. the rest is the same. oh and there is a ) missing on line 2. Thanks for the code it was just what I was looking for.

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.