Rotating Background On Browser Refresh
February 24th, 2010For an aspiring Drupaler or themer a simple CSS driven rotating background can be performed with this simple howto. Rotating backgrounds a simple way to add a bit more flair to your website and everyone wants their Drupal site to sizzle.
It is easy to get setup and have it into operation in your theme. Almost copy and Paste!
Define the DIV tag that will contain the rotating background
In my theme I have a header area called hbackground, it looks a bit like this:
<div id="hbackground"> <-- This is where your image will be placed --> </div>
Remember that the CSS will collapse if there is no content or a non-breaking space ( )
Change hbackground to whatever your #id happens to be.
Define the CSS in the stylesheet
In your CSS stylesheet, define the height and width of the image.
Do not define the background image! color is fine, but not the background.
My CSS looks like the following:
#hbackground
{
width:960px; height:300px; background-color:gray; }
Add this to the HEAD section in the page.tpl.php
Inside the <HEAD> section add this snippit to your page.tpl.php:
<?php include_once("sites/all/themes/Unity/home-randompic.php") ; ?>Create home-randompic.php
Create home-randompic.php in your themes directory and add the following code into it:
<?php
//To add additional images copy each array element and add the image to the named directory.
$word=array(
'<style type="text/css">#hbackground{background-image:url(/sites/all/themes/Unity/images/banner/pic1.jpg);}</style>',
'<style type="text/css">#hbackground{background-image:url(/sites/all/themes/Unity/images/banner/pic2.jpg);}</style>',
'<style type="text/css">#hbackground{background-image:url(/sites/all/themes/Unity/images/banner/pic3.jpg);}</style>',
'<style type="text/css">#hbackground{background-image:url(/sites/all/themes/Unity/images/banner/pic4.jpg);}</style>');
$up=rand(0,count($word)-1);
print $word[$up];
?>
Remember to check your Syntax if you get an error!
Add your images to the correct directory
Create the image directory and put your images into it. Remember, optimize them for the users on slow connections. They will be very grateful for your site using less bandwidth.
Finally refesh your theme
Dump your theme's cache and refresh your browser. Everytime your website loads a page, a new image should be present. My next article will be about using jquery to do something like this, but without a page re-fresh.
Tags: 
