Full Browser Random Background Images:
Introduction
While I have made a detailed step-by-step-guide for the modification of both the index.php and the style.css/ie.css, it is good to understand the underlying system. The random background image will in fact not be a „real“ background image but just a normal image which is placed behind the rest of the website. We achieve this with the CSS-attribute z-index.
Note: An element with z-index: 1 resides behind an element with z-index: 2.
To do this, we are going to make a < div> called „the-background“ for our background-image and style it with a z-index of 1. Then, we will wrap everything else until the < /body> - tag in a < div> called „wrapper“.
In order to get this running, it is very helpful to basically understand what we are doing here to make this work.
Usage Note: All Background-images will be scaled to the size of your browser window.
You can decide which exhibits should have a fixed background and which are random.
If you have set a (fixed) background image in the exhibit, it will be scaled to full window size, but no randomness will happen.
If you want random background images on a certain exhibit, don‘t set a background image in indexhibit! If you already have a background set, remove it.
Getting it Up and Running:
The whole procedure, step by step.
There are two essential files to upload to your server:
full_background.js is a javascript file which scales the background image according to the size of the browser window.
plugin.rnd_full_background.php is a php plugin which picks a random image from a folder. It also outputs the size of the browser window.
1: UPLOAD full_background.js
upload full_background.js to your server at the following location:
(SITE ROOT)/ndxz-studio/site/js
2: UPLOAD plugin.rnd_full_background.php
upload plugin.rnd_full_background.php to your server at the following location:
(SITE ROOT)/ndxz-studio/site/plugin
Now is a good time to create a folder for the background images on your server. I recommend to create it in the existing folder /files and to call it /bgbig.
Then, we can upload some images to that folder.
3: CREATE /files/bgbig
Create a folder for the images and call it:
(SITE ROOT)/files/bgbig
4: UPLOAD some images
Upload the background images to the new folder called
(SITE ROOT)/files/bgbig
5: MODIFY index.php
Navigate to /ndxz-studio/site/[..your theme..]/index.php and open that file in your favorite text/code editor.
The first modification will take place at the end of the < head> - section of the file:
You want to link to the javascript file full_background.js that calculates the image sizes.
Enter the following code just before the closing < /head> -tag:
        <!-- Full-Screen-Background... -->        <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/full_background.js'></script>
The next two modifications takes place in the very beginning and at the very end of the < body> - section:
We are going to create a division < div> that will hold our background image. In this division, we refer to plugin.rnd_full_background.php and the path to the folder with background images. In this example, the folder is /files/bgbig !!Please note that there is no / after the folder name!!
Add the following code directly after < body class='section-'>:
        <div id='the-background'><plug:rnd_full_background files/bgbig /></div>
Now, we are going to wrap everything else that is in the body in a div called „wrapper“:
a) Add the following code directly after your last addition (from Step 2):
        <div id='wrapper'>
b) Add the following code just before the closing - tag; close to the end of your file:
        </div>
6: MODIFY style.css
Navigate to [SITE-ROOT]/ndxz-studio/site/[..your theme..]/style.css and open that file in your favorite text/code editor.
We will add two new sets of instructions, one for the id „the-background“ and one for the id „wrapper“:
Add the following code to your stylesheet:
        #the-background {            position: fixed;            overflow: hidden;            z-index: 1;            width: 100%;            height: 100%;            top: 0;            left: 0;        }
        #wrapper {            position: absolute;            z-index: 2;            width: 100%;            height: 100%;            top: 0;            left:0;        }
When that‘s done, add the same code to [SITE-ROOT]/ndxz-studio/site/[..your theme..]/ie.css
That‘s it, now it should work! Have fun with it!