Random images in CSS

**CitricAcid** · 04-12-2008

I am trying to edit and change a theme applied to a Coppermine gallery. I have some basic knowledge of HTML, but that's all.

HTML Code:

.header{ 
background: url(images/headerbg.gif) no-repeat; 
width: 760px; 
height: 143px; 
float: left; 
}

I want to replace the code so that the image is random. Here is the code:

HTML Code:

<? 
$imgs = array("image1.gif", "image2.gif", "image3.gif"); 
srand ((double)microtime()*1000000); 
shuffle($imgs); 
echo '<img src="repertoireimages/' . $imgs[0] . '" BORDER = "0" alt="" />'; 
?>

The problem is that PHP, and this stylesheet has difficulty with the code. Someone have an idea to display a random image? Or even change the picture every day?

**Lemog** · 04-12-2008

Sorry mate but we can not do CSS dynamic. In your case, you can make CSS to set the format for this image against what will appear from the PHP

**sergioKomic** · 04-12-2008

Overload your style in your page header PHP directly into the tag.

HTML Code:

<? 
$imgs = array("image1.gif", "image2.gif", "image3.gif"); 
srand ((double)microtime()*1000000); 
shuffle($imgs); 
?>

... 
<div style="background: url(<?echo 'repertoireimages/' . $imgs[0]; ?>) no-repeat"> 
...

**CitricAcid** · 04-12-2008

Well, I'll consider that, for all you say is to change the header of my Coppermine gallery. The image is placed by the CSS, hence my question.

**sergioKomic** · 04-12-2008

In fact, rather than putting the image via CSS, it must be placed directly on the page via a php style always.

You want in your page .php tag that contains the words "class = header" and put in this tag

HTML Code:

class="header" style="background: url(<?echo 'repertoireimages/' . $imgs[0]; ?>) no-repeat">

knowing a little higher on the page you wrote this script that will make a shuffle images on the table

**CitricAcid** · 04-12-2008

Well, I just turned but the different DIV bother me (not to the desired image in the background) and I am back on good old tables!

Now it is impossible to eat my random image in the background of the table.

HTML Code:

<script language="JavaScript"> 
banner(); 
</SCRIPT>

In the image field background of the table ... I see it "banner ();

How?

**sergioKomic** · 04-12-2008

On your index.php add the following code:

PHP Code:


<?php 

$imgs = array("image1.gif", "image2.gif", "image3.gif"); 

srand ((double)microtime()*1000000); 

shuffle($imgs); 

?>

then

PHP Code:


<script LANGUAGE="JavaScript"> 

function changeFond() { 

document.getElementById("maTableHeader").style.backgroundImage='url(<?php echo $imgs[0]?>)' 

} 

</script>

then this:

PHP Code:


<body onload="changeFond()">

and finally in the page where your table is described must be added

PHP Code:


<table width="860" height="143" id="maTableHeader">

**CitricAcid** · 04-12-2008

Hey perfect, thank you very much!

I just go with this code without much understanding, hope it will help me!

Thread: Random images in CSS

Thread Tools

Random images in CSS

Re: Random images in CSS

Re: Random images in CSS

Re: Random images in CSS

Re: Random images in CSS

Re: Random images in CSS

Re: Random images in CSS

Re: Random images in CSS

Similar Threads

Generate some quality of random number via Random Number Generation function

How to add images to Google Images

Random images appear while playing BattleField Bad Company 2

How to use "Math.random()" to generate a random number in JavaScript?

PHP Random image 3 images in a row

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions