Forums / Templates, Stylesheets, Page Layout / Change background on refresh

Change background on refresh

Results 1 to 3 of 3

24 Feb 2011, 5:06 AM

dddmx3

Zen Follower

Join Date:: Jul 2010
Location:: Battle Ground, WA
Posts:: 282
Plugin Contributions:: 0

Change background on refresh

I'd like to change the background on every refresh...
I looked this up on google and this is what I came up with:
(My problem is, I did all this but it didnt work! :shocking:)

Add this to your php file:

<?php 
$imagearray=file('background.inc.php'); 
$imagenum=rand(0,count($imagearray)-1); 
?>

Add this to your css:

div.container { 
padding : 95px 20px 20px 161px; 
background : url(<?php echo $imagearray[$imagenum];?>) #FFFFFF repeat; 
margin-top: nem 
}

And make a new file called "background.inc.php" and inside it put:

images/image1.jpg
images/image2.jpg
images/image3.jpg

etc, no blank lines, no quotes, no spaces, no semi-colons

My problem is, I did all this but it didnt work! :shocking:

24 Feb 2011, 5:10 AM

dddmx3

Zen Follower

Join Date:: Jul 2010
Location:: Battle Ground, WA
Posts:: 282
Plugin Contributions:: 0

Re: Change background on refresh

Or if I would like for it to change daily, where could I put this code?

    <script>

      function dailyBackground(node,images)
      {
        node.style.backgroundImage = "url(\""+images[Math.floor(new Date().getTime()/86400000)%images.length]+"\")";
      }

    </script>

  </head>
 
  <body>
 
    <h1>Daily Background Image</h1>
   
    <script>
   
      var imgArray = new Array();
      imgArray[0] = "images/image1.jpg";
      imgArray[1] = "images/image2.jpg";
      imgArray[2] = "images/image3.jpg";

      dailyBackground(document.body,imgArray);
     
    </script>

24 Feb 2011, 5:21 AM

dddmx3

Zen Follower

Join Date:: Jul 2010
Location:: Battle Ground, WA
Posts:: 282
Plugin Contributions:: 0

Re: Change background on refresh

Figured it out.
I put this code into /includes/templates/MY_TEMPLATE/tpl_index_default.php right before the line: <div class="centerColumn" id="indexDefault">

<script>

      function dailyBackground(node,images)
      {
        node.style.backgroundImage = "url(\""+images[Math.floor(new Date().getTime()/86400000)%images.length]+"\")";
      }

    </script>  
    <script>
   
      var imgArray = new Array();
      imgArray[0] = "includes/templates/MY_TEMPLATE/images/bg1.jpg";
      imgArray[1] = "includes/templates/MY_TEMPLATE/images/bg2.jpg";
      imgArray[2] = "includes/templates/MY_TEMPLATE/images/bg3.jpg";
	  imgArray[3] = "includes/templates/MY_TEMPLATE/images/bg4.jpg";
	  imgArray[4] = "includes/templates/MY_TEMPLATE/images/bg5.jpg";
	  imgArray[5] = "includes/templates/MY_TEMPLATE/images/bg6.jpg";
	  imgArray[6] = "includes/templates/MY_TEMPLATE/images/bg7.jpg";
	  imgArray[6] = "includes/templates/MY_TEMPLATE/images/bg8.jpg";

      dailyBackground(document.body,imgArray);
     
    </script>