2 replies [Last post]
arun75
arun75's picture
Offline
newbie
utrecht, nl
Last seen: 2 years 41 weeks ago
utrecht, nl
Timezone: GMT+2
Joined: 2011-10-08
Posts: 1
Points: 2

Hello everybody

I created a page with a repeated background image (pattern, repeated xy) and a div which is centered and contains all content in various div's.
I created a div that contains a background image which is centered top and fits with the content div. it's all good so far

I want to have my website display a random background image when the page is (re)loaded for the center top div (it has no height or width specified because i have my main bg image pattern repeated.
My question is, can anyone help me out?

Here's my css for the center top bg div and the wrapper with the content, pretty basic.

#buccaneersbg {
	background: url(buccaneers/bg/bg-buc_1.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}
 
#wrapper {
	margin: 15px auto 10px auto;
	padding: 0;
	text-align: left;
	width: 1000px;
}

Here's the result so far (I'm still working on the further website so it may change every now and then)
www.mc-arun.com/buccaneers

thanks!

jerome2710
jerome2710's picture
Offline
newbie
The Netherlands
Last seen: 2 years 41 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2011-10-07
Posts: 5
Points: 6

Hi there, Instead of linking

Hi there,

Instead of linking to an image, you could like to a file too in the CSS.
This could be your solution, linking to a .php document.

Copy and paste the following code in a new document and call it random.php.

<?php
 
/* ------------------------- CONFIGURATION -----------------------*/
	$folder = '.';
 
    $extList = array();
	$extList['gif'] = 'image/gif';
	$extList['jpg'] = 'image/jpeg';
	$extList['jpeg'] = 'image/jpeg';
	$extList['png'] = 'image/png';
 
 
// --------------------- END CONFIGURATION -----------------------
 
$img = null;
 
if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}
 
if (isset($_GET['img'])) {
	$imageInfo = pathinfo($_GET['img']);
	if (
	    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
		$img = $folder.$imageInfo['basename'];
	}
} else {
	$fileList = array();
	$handle = opendir($folder);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (
		    isset( $extList[ strtolower( $file_info['extension'] ) ] )
		) {
			$fileList[] = $file;
		}
	}
	closedir($handle);
 
	if (count($fileList) > <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> {
		$imageNumber = time() % count($fileList);
		$img = $folder.$fileList[$imageNumber];
	}
}
 
if ($img!=null) {
	$imageInfo = pathinfo($img);
	$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
	header ($contentType);
	readfile($img);
} else {
	if ( function_exists('imagecreate') ) {
		header ("Content-type: image/png");
		$im = @imagecreate (100, 100)
		    or die ("Cannot initialize new GD image stream");
		$background_color = imagecolorallocate ($im, 255, 255, 255);
		$text_color = imagecolorallocate ($im, 0,0,0);
		imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
		imagepng ($im);
		imagedestroy($im);
	}
}
 
?>

If you place the random.php in the same folder where the images are, you won't have to change anything.
If you do want to place the file at some place different, adjust "$folder" in the configuration.
Also, the file formats are located in the configuration section.

Please let me know if you have any questions.

Best regards,
Jerome

jerome2710
jerome2710's picture
Offline
newbie
The Netherlands
Last seen: 2 years 41 weeks ago
The Netherlands
Timezone: GMT+2
Joined: 2011-10-07
Posts: 5
Points: 6

I see that the forum is

I see that the forum is making an adjustment to my code.

You should replace the image link in the code to "0 )" without spaces.