[Style] Fullscreen Random Background Image

Hi,

this changes randomly (page reload) the background image in your galery.
For me it's used for the hole galery but it can be easily adapted to work
for different categories or template html files...

Before we begin some examples (press strg while clicking on image):

Here we go:

Step 1

Add this to your style.css:

Code: [Select] [Expand] [Hide line numbers]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } }

Step 1.2

This step is important, else you will just see the background image

In your style.css locate you main container (normally "container") and set:

Code: [Select] [Expand] [Hide line numbers]

1	`position: relative;`

Step 2

Create a file called "randombg.php" and paste:

Code: [Select] [Expand] [Hide line numbers]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 <?php #FILE: random_image.php - Version 1.3 # #INSTALLATION INSTRUCTIONS: # 1) Save this php code to your server. # 2) Make sure the script has execute permissions. # 3) Make sure your $IMAGE_DIRECTORY has read permissions, as well # as the files within that directory. # 4) Change: # $IMAGE_DIRECTORY = "../pictures/"; # as described in the php code below. # 5) Make your IMG tag look similar to the following: # <IMG SRC="/scripts/random_image.php" ALT=""> # #ABOUT THIS SCRIPT: # This is a very simple php script. All it does is grab a #random image from a directory and print it out, hiding the actual #filename of the image displayed. Currently, this #script just works with gif and jpg/jpeg images. # #HISTORY: # ??/??/?? 1.3 Updated and streamlined the code with # release of java version # ??/??/?? 1.2 Updated with ASP release # ??/??/?? 1.1 Original release # #AUTHOR: # http://www.davelozinski.com/scripts # #BEGIN CONFIGURATION ITEMS: #The full path listing to the directory which contains the images #to be randomly chosen and displayed. #Unix users should be able to get away with specifying a relative path. #NT users may have to specify the full system path, which will probably #need to look similar to: #"c:\\wwwroot\\htdocs\\images\\" or #"f:/Inetpub/wwwroot/images/" $IMAGE_DIRECTORY = ""; ###Nothing below this line should need to be configured.### $line = ""; $randomNumber= 0; $imageFiles = array(); $fileName = ""; $x=0; if ($DIR = opendir($IMAGE_DIRECTORY)) { while ($fileName = readdir($DIR)) { if (is_dir($IMAGE_DIRECTORY . $fileName)) { continue; } if (!preg_match("/\w/", $fileName)) { continue; } if (preg_match("/\.gif$|\.jpg$|\.jpeg$/i",$fileName)) { $imageFiles[$x] = $fileName; $x+=1; } } closedir($DIR); srand((double)microtime()*1000000); $randomNumber = rand(0,(count($imageFiles) - 1)); Header ("Pragma: no-cache\n"); if (preg_match("/\.gif$/i",$imageFiles[$randomNumber])) { Header ("Content-type: image/gif\n\n"); } elseif (preg_match("/\.jpg$|\.jpeg$/i",$imageFiles[$randomNumber])) { Header ("Content-type: image/jpg\n\n"); } else { #Not a gif or jpeg file. Exit the program. exit; } $fp = fopen ($IMAGE_DIRECTORY . $imageFiles[$randomNumber], "rb"); echo (fread($fp,filesize($IMAGE_DIRECTORY . $imageFiles[$randomNumber]))); fclose($fp); } exit; # random_image.php ?>

Step 2.1

in randombg.pgp set the path to your background images:

Code: [Select] [Expand] [Hide line numbers]

1	`$IMAGE_DIRECTORY = "";`

Step 3

Place this in every template file where you want to display the background image:

Code: [Select] [Expand] [Hide line numbers]

1	`<img border="0" src="randombg.php" class="bg">`

All done

Tips

You can also point $IMAGE_DIRECTORY = ""; to your data directory for use with
background images out of the category where you within.

Greetz X23