21 replies [Last post]
Francesco
Offline
Regular
Last seen: 16 years 50 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

I'm making a web site almost entirely in CCS and am wondering if the way I've done I can make it so that the background image changes randomly with every reload...

The following excerpt is from my CCS file outside of my html document:

div.container {
padding : 95px 20px 20px 161px;
background : url(images/bg.gif) #FFFFFF repeat;
margin-top: nem
}

If anyone can help me modify this so that on every refresh a new background image is chosen at Random, it would be greatly appreciated.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Javascript background image changer

Hi Francesco,
You would need to use a little JavaScript which randomly changes the image name onload. I would give the div an ID so its easier to handle in this example 'yourid' then stick this in the head of your document and change the image names to suite.

<script type="text/javascript">  
window.onload=function(){  
   var thediv=document.getElementById("yourid");  
   var imgarray = new Array("imageone.gif", "imagetwo.gif", imagethree.gif");  
   var spot =Math.floor(Math.random()* imgarry.length);  
   thediv.style.background="url("+imgarray[spot]+")";  
}  
</script>  

Hope that helps

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi

The only problem with java is if the user has it disabled. I posted a php alternative here:

http://www.csscreator.com/css-node/

It is easy to implement and works server side, so it is transparent to the user.

Trevor

Francesco
Offline
Regular
Last seen: 16 years 50 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Cool Thanks but...

Thanks both of you for your advice... However, I'm gonna need a little more help with that please...

I'm very new at manipulating code of both html, and especially, CSS. Could you be a little more about how'd I go about implementing that PHP please ClevaTreva... (Sorry Tony but he was right about the Java comment).

Like what I'd have have to change in the script for background image that I've included in my initial post, and where I should put the PHP code in the html or php notepad of itself in a folder somewhere and how I'd go about calling it and every thing... please... Laughing out loud

I'd greatly appreciate this as I've been trying to figure out for the past few days now how this all works and I'm still quite getting it...

Thanks again...Wink

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi Francesco

First, is your server php enabled? As I posted, if you don't know, make a file with this in:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Hello World!</title> 
</head> 

<body> 
<h1>Hello World!</h1> 

<p> If your installation of PHP is working properly, you should 
see a lot of information below. If you just see a single line 
of text, then you probably need to tweak your AddType setting 
in Apache, and make sure that you're viewing this using 
apache, and not by clicking on this document directly.</p> 

<? phpinfo(); ?> 
<br /><br /> 


<?PHP print_r(gd_info()); ?>


<?PHP 
if (imagetypes() & IMG_GIF) echo "GIF Support is enabled<br />"; 
if (imagetypes() & IMG_JPG) echo "JPEG Support is enabled<br />"; 
if (imagetypes() & IMG_PNG) echo "PNG Support is enabled<br />"; 
if (imagetypes() & IMG_WBMP) echo "WBMP Support is enabled<br />"; 
?> 
</body> 
</html>

name it phpinfo.php, upload it and run it. If you get loads of info about php, it's enabled. Almost all shared servers have it nowadays.

Then.

Rename your actual file, say it is called:

myfile.htm

to

myfile.php

Then, at the start of the file (before anything else), put these lines:

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

Then, your style would be:

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

You would need a separate file, called

backgrounds.inc.php

which just has something like this in:

images/bg.gif
images/bg1.gif
images/bg2.gif

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

Trevor

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Random Background Image on Refresh

Excellent post Trevor,
I'm sure it will help many others.
At least the JavaScript has provided an alternative.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi Tony

Well, it ought to work. I've been doing php for too *** long now!

And only now am I getting the hang of css Laughing out loud

Trevor

Francesco
Offline
Regular
Last seen: 16 years 50 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

OK my PHP is enabled, however...

Hey Trevor,

OK I've checked to see if my server PHP is enabled and I got a bunch of information just like you said. I've tried following your instructions to the letter but for some reason I can't get it working.

I have the following files in the root directory of Web Page server:

    index.htm style.css
    random.php
    backgrounds.inc.php

The index.htm points to my style.css where the initial code that I posted in this topic came from. I modified the url exactly as you had it in the style.css and I created the bacgrounds.inc.php almost exactly as you told me except slightly different fille names.

I think my mistake was in the random.php file. I tried it these 2 ways but they did not work:

<? phpinfo(); ?> 
<br /><br /> 


<?PHP print_r(gd_info()); ?> 


<?PHP 

$imagearray=file('backgrounds.inc.php'); 
$imagenum=rand(0,count($imagearray)); 

if (imagetypes() & IMG_GIF) echo "GIF Support is enabled<br />"; 
if (imagetypes() & IMG_JPG) echo "JPEG Support is enabled<br />"; 
if (imagetypes() & IMG_PNG) echo "PNG Support is enabled<br />"; 
if (imagetypes() & IMG_WBMP) echo "WBMP Support is enabled<br />"; 
?>

And then I tried it this way
<?php 
$imagearray=file('backgrounds.inc.php'); 
$imagenum=rand(0,count($imagearray)); 
?>

<? phpinfo(); ?> 
<br /><br /> 


<?PHP print_r(gd_info()); ?> 


<?PHP 
if (imagetypes() & IMG_GIF) echo "GIF Support is enabled<br />"; 
if (imagetypes() & IMG_JPG) echo "JPEG Support is enabled<br />"; 
if (imagetypes() & IMG_PNG) echo "PNG Support is enabled<br />"; 
if (imagetypes() & IMG_WBMP) echo "WBMP Support is enabled<br />"; 
?> 

I also tried some different variations in the file but nothing seemed to work..

Any help you could provide would be greatly appreciate.

Thank again for everybody's help so far... Wink

[/]
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi

Was the file you have the background in index.htm?

Yes?

Rename THAT file to index.php

Then add the php bits I gave you to the top of that file, NOT the phpinfo file!

Trevor

Francesco
Offline
Regular
Last seen: 16 years 50 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Nope...

Hey There,

The file that has the lines pointing to the background information is actually in my style.css file. I've tried changing my random.php to index.php but that didn't seem to make a difference.

So should I erase the stuff you said to add in from the the file I just renamed to index.php?

Thanks again,

Francesco

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Ah

The line that points to the background will have to be moved out of the style sheet and put into the main file.

So, link the stylesheet as normal, then after that have a style declaration with just that one item in.

Trevor

Francesco
Offline
Regular
Last seen: 16 years 50 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Can't do That

Trevor,

Well unfortunately the way I made my CSS web site I can't put the line which points to the style sheet into the main file, or rather if there were a way I do not know it, as it would mess up my entire style sheet. I stated in my very first post that the index file was pointing to my style.css and that was where the line for my background was coming from.

If you or anyway else can suggest a way that I can put my background information into my index.htm without it messing up my CSS style sheet that would be greatly appreciated.

Or if I have no choice maybe you Tony could help me figure out a way to use that Javascript instead of the PHP alternative.

I've been struggling with getting this working for almost a week now and I'm eager to get it fixed...

Look forward to hearing your responses soon...

Thanks again,

Francesco

Francesco
Offline
Regular
Last seen: 16 years 50 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

I DID IT!!

Hey Everybody!

Thanks for all your help! I finally just figured it all out. Sorry if those last few posts got kind of annoying but I did a little more reading up and I finally got it working. Thanks I really appreciate it, couldn't a done it without you Trevor... Wink

I have another quick question though, any idea why the random background would work 90% of the time but other times it woudln't bring up a background at all?

Thanks again Laughing out loud

Francesco

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hey Francesco

Glad to see you got it working. My guess as to the blank one is that there is a blank variable in the array.

Either your list of backgrounds has got a blank line (like at the end), or something isn't quite right in the text of those links (a character that php interprets wrong, for example).

If you have put the php in the css file (I believe that IS possible, I just haven't ever done it, the file would have .php instead of .css and may need some headers set to tell the browsers it is css), then when the problem happens, search for the style sheet in your temporary files and look at it to see what php echo'd into it.

If you have approx 10 backgrounds, then I would even more make this conclusion, as on average random selection of these where one was blank would be 10%.

Trevor

Francesco
Offline
Regular
Last seen: 16 years 50 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Random Background Image on Refresh

Hey there,

Nope I didn't put the php info into the CSS file. I did everything pretty much as you suggested that I should.

The first thing I did was check to make sure that there weren't any blank lines or anything in my array. My background.inc.php looks exactly like this:

images/bg_1.jpg
images/bg_2.jpg
images/bg_3.jpg
images/bg_4.jpg
images/bg_5.jpg
images/bg_6.gif
images/bg_7.jpg
images/bg_8.jpg

With no extra lines or spaces. And yes line 6 is supposed to read .gif. I've refreshed my page many times until I saw every background that I had put in.

Another thing I wanted to do was make my header appear differently so I used the array you gave me with only 2 variables this time just to test and see if it would work. Well it did but I had the same problem where 1 in 3 times the header would come up as a broken link.

Now that I've read more on PHP I understand better how it works and would prefer to use it as opposed to Javascript but if I can't get the array that you gave me working properly, whereby everytime you visit the page you get a picture then I will have no choice but to use java or someone else's PHP code.

Maybe you can look over the code that you told me to put in that you posted earlier in this topic just to make sure everything was in order...

Thanks,

Francesco

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi

Hey ho.

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

notice the extra -1?

I forgot the array is counted from 0. Doh.

Trevor
PS, I edited the post above where this was too, so anyone copying it doesn't have the same problem Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi

As a postscript to this thread, if you do get into php, you will find it has an extra 3rd party library for image manipulation, called the gd library.

You can do some really cool things with this library, not least of which is an alternative random generator.

So, remember that phpinfo script I posted? Did it say (at the bottom) that the image library was enabled, and what version was the php (hopefully 4.34).

If so, I'll post an alternative way of doing it that leaves your index file as html (no php) and your css file with no php in. It will, however, place a small load on your server, but not much. And probably a lower load than running the index file through the php parser.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi

A few minutes coding later.

This script gives you a random choice of millions of different background patterns. To test it, make an html file with this in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Random Background Tester</title>
<link rel="Stylesheet" href="" type="text/css" media="All" />
<style type="text/css">
body {
background:url(rand_back.php) repeat 0;
}
</style>
<script type="text/javascript" src=""></script>
</head>
<body>
</body>
</html>

and upload it. Let's call it rand_back_test.htm

Then make this php file:

<?php
header ("Content-type: image/png\nContent-Disposition: inline; filename=randbg.png");
//decide whether the background color scheme is random (1) or fixed (0)
$rand_background_color=1;
if ($rand_background_color==0)
{
// if a fixed color ($rand_background_color=0), put the six digit hex color code in the next line
	$background_color="EEEEEE";
} else {
// if a random color ($rand_background_color=1), this makes a random six digit hex color code
	$background_color=str_pad(dechex(rand(0,16777215)), 6, "0", STR_PAD_LEFT);
}
// make an array of background types
$background_type= array ("bumps",
						 "checks",
						 "crosses",
						 "3d_crosses",
						 "dents",
						 "dots",
						 "slashes",
);
// now randomnly choose the $background_type
$rand_background_type=$background_type[rand(0,count($background_type)-1)];
// read the color into an array for handling
$colorarray = array (
	"colorname" => array ("red",
						  "green",
						  "blue"),
	"colorvalue" => array (hexdec(substr($background_color,0,2)),
						   hexdec(substr($background_color,2,2)),
						   hexdec(substr($background_color,4,2))
						   ));
switch ($rand_background_type)
{
	case "bumps":
		$newImg = ImageCreate(4,4);
		// if the color is too light, make it darker.
		if (intval(max($colorarray['colorvalue'])*1.28)>255)
		{
			for ($i=0; $i<count($colorarray['colorname']);$i++)
			{
				$colorarray['colorvalue'][$i]=intval($colorarray['colorvalue'][$i]*(255/(max($colorarray['colorvalue'])*1.28)));
			}
		}
		// make the background color for the image
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=$colorarray['colorvalue'][$i];
		}
		// define and fill (the first color defined is always filled in as the background color) the background color in
		$backgroundcolor = imagecolorallocate($newImg,$red,$green,$blue);
		// make the light (x2) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(1.28*$colorarray['colorvalue'][$i]);
		}
		// make the light color (x2) available in the pallette
		$colour_lt2 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the light (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(1.12*$colorarray['colorvalue'][$i]);
		}
		// make the light color (x1) available in the pallette
		$colour_lt1 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x2) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.62*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x2) available in the pallette
		$colour_dk2 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.67*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x1) available in the pallette
		$colour_dk1 = imagecolorallocate($newImg,$red,$green,$blue);
		//fill first 2x2 rectangle with light (x1) color
		ImageFilledRectangle($newImg,1,1,2,2,$colour_lt1);
		//fill second 2x2 rectangle with dark (x1) color
		ImageFilledRectangle($newImg,2,2,3,3,$colour_dk1);
		// fill in 1 pixel light (x2) color
		ImageFilledRectangle($newImg,1,1,1,1,$colour_lt2);
		// fill in 1 pixel background color
		ImageFilledRectangle($newImg,2,2,2,2,$backgroundcolor);
		// fill in 1 pixel dark (x2) color
		ImageFilledRectangle($newImg,3,3,3,3,$colour_dk2);
		break;
	case "checks":
		$newImg = ImageCreate(6,6);
		// make the dark (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.67*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x1) available in the pallette and fill the image with it
		// (the first color defined is always filled in as the background color)
		$colour_dk1 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the background color for the image
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=$colorarray['colorvalue'][$i];
		}
		// define the 'true' background color
		$backgroundcolor = imagecolorallocate($newImg,$red,$green,$blue);
		// fill in 5*5 pixel background color
		ImageFilledRectangle($newImg,1,1,6,6,$backgroundcolor);
		break;
	case "crosses":
		$newImg = ImageCreate(7,7);
		// make the background color for the image
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=$colorarray['colorvalue'][$i];
		}
		// define and fill (the first color defined is always filled in as the background color) the background color in
		$backgroundcolor = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.88*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x1) available in the pallette
		$colour_dk1 = imagecolorallocate($newImg,$red,$green,$blue);
		// fill in two 1*5 rectangles in dark (x1) color
		ImageFilledRectangle($newImg,3,1,3,5,$colour_dk1);
		ImageFilledRectangle($newImg,1,3,5,3,$colour_dk1);
		break;
	case "3d_crosses":
		$newImg = ImageCreate(8,8);
		// if the color is too light, make it darker.
		if (intval(max($colorarray['colorvalue'])*1.28)>255)
		{
			for ($i=0; $i<count($colorarray['colorname']);$i++)
			{
				$colorarray['colorvalue'][$i]=intval($colorarray['colorvalue'][$i]*(255/(max($colorarray['colorvalue'])*1.28)));
			}
		}
		// make the background color for the image
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=$colorarray['colorvalue'][$i];
		}
		// define and fill (the first color defined is always filled in as the background color) the background color in
		$backgroundcolor = imagecolorallocate($newImg,$red,$green,$blue);
		// make the light (x2) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(1.28*$colorarray['colorvalue'][$i]);
		}
		// make the light color (x2) available in the pallette
		$colour_lt2 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x2) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(1.12*$colorarray['colorvalue'][$i]);
		}
		// make the light color (x1) available in the pallette
		$colour_lt1 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.88*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x1) available in the pallette
		$colour_dk1 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x2) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.67*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x2) available in the pallette
		$colour_dk2 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x3) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.62*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x3) available in the pallette
		$colour_dk3 = imagecolorallocate($newImg,$red,$green,$blue);
		ImageFilledRectangle($newImg,3,3,3,3,$colour_lt2);
		//fill first two 2x1 rectangles with light (x2) color
		ImageFilledRectangle($newImg,3,1,3,2,$colour_lt1);
		ImageFilledRectangle($newImg,1,3,2,3,$colour_lt1);
		//fill next two 2x1 rectangles with dark (x1) color
		ImageFilledRectangle($newImg,4,1,4,2,$colour_dk1);
		ImageFilledRectangle($newImg,3,5,3,6,$colour_dk1);
		//fill next two 3x1 rectangles with dark (x1) color
		ImageFilledRectangle($newImg,4,3,6,3,$colour_dk1);
		ImageFilledRectangle($newImg,1,4,3,4,$colour_dk1);
		//fill next two 2x1 rectangles with dark (x2) color
		ImageFilledRectangle($newImg,5,4,6,4,$colour_dk2);
		ImageFilledRectangle($newImg,4,5,4,6,$colour_dk2);
		//fill last pixel with dark (x3) color
		ImageFilledRectangle($newImg,4,4,4,4,$colour_dk3);
		break;
	case "dents":
		$newImg = ImageCreate(4,4);
		// if the color is too light, make it darker.
		if (intval(max($colorarray['colorvalue'])*1.28)>255)
		{
			for ($i=0; $i<count($colorarray['colorname']);$i++)
			{
				$colorarray['colorvalue'][$i]=intval($colorarray['colorvalue'][$i]*(255/(max($colorarray['colorvalue'])*1.28)));
			}
		}
		// make the background color for the image
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=$colorarray['colorvalue'][$i];
		}
		// define and fill (the first color defined is always filled in as the background color) the background color in
		$backgroundcolor = imagecolorallocate($newImg,$red,$green,$blue);
		// make the light (x2) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(1.28*$colorarray['colorvalue'][$i]);
		}
		// make the light color (x2) available in the pallette
		$colour_lt2 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the light (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(1.12*$colorarray['colorvalue'][$i]);
		}
		// make the light color (x1) available in the pallette
		$colour_lt1 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x2) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.62*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x2) available in the pallette
		$colour_dk2 = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.67*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x1) available in the pallette
		$colour_dk1 = imagecolorallocate($newImg,$red,$green,$blue);
		//fill first 2x2 rectangle with light (x1) color
		ImageFilledRectangle($newImg,2,2,3,3,$colour_lt1);
		//fill second 2x2 rectangle with dark (x1) color
		ImageFilledRectangle($newImg,1,1,2,2,$colour_dk1);
		// fill in 1 pixel light (x2) color
		ImageFilledRectangle($newImg,3,3,3,3,$colour_lt2);
		// fill in 1 pixel background color
		ImageFilledRectangle($newImg,2,2,2,2,$backgroundcolor);
		// fill in 1 pixel dark (x2) color
		ImageFilledRectangle($newImg,1,1,1,1,$colour_dk2);
		break;
	case "dots":
		$newImg = ImageCreate(5,5);
		// make the background color for the image
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=$colorarray['colorvalue'][$i];
		}
		// define and fill (the first color defined is always filled in as the background color) the background color in
		$backgroundcolor = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.62*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x1) available in the pallette
		$colour_dk1 = imagecolorallocate($newImg,$red,$green,$blue);
		//fill single pixel with dark (x1) color
		ImageFilledRectangle($newImg,2,2,2,2,$colour_dk1);
		break;
	case "slashes":
		$newImg = ImageCreate(5,5);
		// make the background color for the image
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=$colorarray['colorvalue'][$i];
		}
		// define and fill (the first color defined is always filled in as the background color) the background color in
		$backgroundcolor = imagecolorallocate($newImg,$red,$green,$blue);
		// make the dark (x1) colors
		for ($i=0; $i<count($colorarray['colorname']);$i++)
		{
			$$colorarray['colorname'][$i]=ceil(.72*$colorarray['colorvalue'][$i]);
		}
		// make the dark color (x1) available in the pallette
		$colour_dk1 = imagecolorallocate($newImg,$red,$green,$blue);
		//fill first pixel with dark (x1) color
		ImageFilledRectangle($newImg,4,0,4,0,$colour_dk1);
		//fill second pixel with dark (x1) color
		ImageFilledRectangle($newImg,3,1,3,1,$colour_dk1);
		//fill third pixel with dark (x1) color
		ImageFilledRectangle($newImg,2,2,2,2,$colour_dk1);
		//fill fourth pixel with dark (x1) color
		ImageFilledRectangle($newImg,1,3,1,3,$colour_dk1);
		//fill last pixel with dark (x1) color
		ImageFilledRectangle($newImg,0,4,0,4,$colour_dk1);
		break;
}
ImagePNG($newImg);
ImageDestroy($newImg);
?>

Name this rand_back.php, and upload it to the same directory as the other file.

Run the test html file.

The script makes a random choice of seven different patterns:

bumps,
checks
crosses
3d_crosses
dents
dots
slashes

and renders them in a random background color.

The script allows you to fix the background color (the script may alter this a bit if the pattern can't be renedered in your color choice).

Notice how no php is used in the html file or the style sheet.

The background will always have the same name.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi

Last post from me (we all hope Laughing out loud ). This one makes a random choice of your own background images as my original idea did, but avoids the use of php in the index file or the css file.

Use the same html file as in my previous post, but this time this is the php file:

<?php
header ("Content-type: image/png\nContent-Disposition: inline; filename=randbg.png");
$background_images_list= array("images/bg1.gif",
							   "images/bg2.gif",
							   "images/bg3.jpg",
);
$image_choice=$background_images_list[rand(0,count($background_images_list)-1)];
$imagenamesplit = split('\.', $image_choice);
$image_type=$imagenamesplit[count($imagenamesplit)-1];
switch (strtolower($image_type))
{
	case"gif";
		$newImg=imagecreatefromgif($image_choice);
		break;
	case"png";
		$newImg=imagecreatefrompng($image_choice);
		break;
	case"jpg";
		$newImg=imagecreatefromjpeg($image_choice);
		break;
}
ImagePNG($newImg);
ImageDestroy($newImg);
?>

Obviously, edit the file list accordingly.
No need for an external list of files.
This only supports gif's, jpeg's and png's.
The GD library cannot export GIF's until a revised version is posted in July (patent problems).

Trevor

Francesco
Offline
Regular
Last seen: 16 years 50 weeks ago
Timezone: GMT+7
Joined: 2004-03-23
Posts: 19
Points: 0

Thanks

Wow those were some posts. My bad about copying the script you gave me it works now, thanks... Wink

I think I'm actually going to go with your suggestion in that last post that you gave me.

I think this topic is going to be real useful for people who are just starting to use PHP and CSS.

Thanks again,

Francesco

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Random Background Image on Refresh

Hey wasn't this supposed to be simpler then the JavaScript version Smile
Good job Trevor.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Random Background Image on Refresh

Hi Tony/Francesco

My original idea was to make it simpler, and the later of my posts probably is the simplest - just didn't think of it first!

As to the longer idea, if you try it you will see what I did (using code I had already written) was to make something independent of external images. If you don't like the somewhat varied use of color, you can tie it down to one base color. I made the file commented so you could see what was happening. Also, you can see how to design your own pattern and add it. I've got a few more I didn't include.

Besides, server-side scripts are far more reliable than client-side ones, and quicker.

Trevor