Site’s background change according to subpage

Today, I will try to solve the common problem with site’s background change according to subpages which should be reduced to some extend in Joomla! 1.6 and where there would be a possibility to change template’s settings for particular subpages (now, we have to create copies of a template given and assign it to particular subpage).

We have to do two things in order to achieve required effects, namely: create in images/ catalog of our template background/ catalog filled with background images which we want to use and add below script in head section of our template (it would be better to add it at the end of it):

<?php

    // Array with associations: Itemid <-> background image
    $bg_images = array(
        "53" => "1.jpg",
        "54" => "2.jpg",
        "default" => "3.jpg" // default background image
    );

    $itemID_value = JRequest::getCmd('Itemid');
    $bg_image = (isset($bg_images[$itemID_value])) ? $bg_images[$itemID_value] : $bg_images["default"];
    $url =&amp; JURI::getInstance();
    
?>

<style type="text/css">
body{
    background:#fff url('<?php echo $url->root(); ?>templates/<?php echo $this->template; ?>/images/backgrounds/<?php echo $bg_image; ?>') center 0!important;
}
</style>

How does it work?

Above script disposes of $bg_images connections table which defines the connections between values of variable Itemid from address and background image assigned to Itemid value given. Script loads Itemid value from address and in this way specifies whether to value given there was assigned any particular background, otherwise, default background image will be used.

Embedded CSS style is responsible for background setting in which it is possible to change positioning parameters of background, background color and its multiplication.

Of course, there is no problem in specifying other background parameters in this way or even adding all CSS styles.

Share
This article was first published May 18th, 2010