I need to implement a background image advertising takeover that surrounds the page content in drupal. It's similar to the ones on ign (screenshot attached below).

The only ways I can think of seem really hacky, such as using a view block to display one result of a custom content type containing the image and showing the view in a custom region that spans the background of the page.

Can anyone think of a better way? It needs to be easy to set up in the CMS for an administrator and they need to be able to create different takeovers for different sections of the site.


advertising takeover on ign


In your theme's preprocess_page() hook you could set a variable that is accessible in your page.tpl.php file. Basically something like:

function YOURMODULE_preprocess_page(&$vars) {


  // other page preprocessing goes here


where make_me_a_background_for_page() is a custom function that returns a path to an image based upon the page being viewed. You can then use that variable however you want to create the background.

One way would be to put a quick div in the page somewhere like...

<?php if (!empty($background_image)): ?>
  <div id="use-this-background-image"><?php print $background_image; ?></div>
<?php endif; ?>

and have it hidden in css:

#use-this-background-image {
  display: none;

and then use jQuery to set the body's background to it:

// Drupal Behaviors Wrapper here :)

  if ($('#use-this-background-image').length) {
    $('body').css('background-image','url("' + $('#use-this-background-image').text() + '")');

// Drupal Behaviors Wrapper here :)

An added bonus of doing it in this somewhat convoluted way is the background image isn't loaded until after your page is, so it pops in after the content, which, to me at least, is nicer looking than watching a big background load and THEN the content.

| improve this answer | |

Do you want a pure Drupal / module based solution? If not, then I have done this most effectively with a bit of jQuery. When someone clicks to go to a certain page, the javascript would check to see if this matches the url in the script. If so, it dynamically changes the CSS as needed (background images, logo / header images, etc).

This is also most effective because you can have arrays of themes. How about multiple games each with its own branding? Very easily accomplished with this solution.

If that is a route you would like to take, let me know and I will provide some links and resources if you are not very familiar with jQuery.

| improve this answer | |

very very easy PHP based solution.

Perhaps even easier than the jQuery would be this:

Lets say you have multiple style.css files - streetfighter.css; kidicarus.css; etc

In your page.tpl.php file (or maybe even in your html.tpl.php file) you add a PHP switch statement just below where the default drupal print $scripts php loads.

Because of the power of cascading style sheets, you can override any of the default style sheets before it to create whatever theme you like. Use php to check the URL then load the stylesheet as needed:

    case (url.com/streetfighter)
        print path/to/streetfighter.css;
    case (url.com/kidicarus)
        print path/to/kidicarus.css;

now your final css overrides everything from background photos to link colors or colorscheme. Endless possibilities.

| improve this answer | |

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.