Webmaster Forums

Kimber · 06-26-2004, 02:48 AM

Is it possible to have a page load a different background image everytime it loads? And is it possible to do this client side?

Thanks, Kimber

azlatin2000 · 06-27-2004, 03:42 PM

Code:

<script>
var a=new Array('1.jpg','2.jpg','3.jpg');
document.body.style.background=a[Math.floor(Math.random()*a.length)];
</script>

Should do the trick, i am busy so i can't test it and i have a dendancy of mixing up php functions with javacript ones so i am not responsible if it doesn't work.

Kimber · 06-27-2004, 08:37 PM

thanks, I'll give it a try

Kimber · 06-27-2004, 09:11 PM

Hmmmm, sorry, didn't work. And I know stuff all about javascript or php, so I don't know how to fix it. But at least I know it 'can' be done, so I know what to search for. Thanks

Votekick · 06-28-2004, 10:52 PM

Is it possible using this instead of php or JS from a CSS?

DCElliott · 06-29-2004, 09:47 AM

azlatin2000 - close but no cigar.

You will have to edit the following with your own filenames and alter the random number limit to be (1 - # of images).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Random Background</title>
    <meta http-equiv="DESCRIPTION"
          content="random background demo">
</head>

<body>
    <script language="JavaScript"
          type="text/javascript">
    <!--
    // This must go between body tags - NOT IN THE HEAD SECTION
    // Edit per your own site structure and number of images

    image = new Array
    
    // Build array of image filenames
    image[0]="firstone.gif"
    image[1]="nextone.gif"
    image[2]="anotherone.gif"
    image[3]="lastone.gif"

    // Create a random number 0 to 3 
    // (remember array element 1 is image[0])
    index = (Math.round((Math.random()*3)))

    // Set background style with random array element
    document.body.style.background="url("+image[index]+") repeat"
    //-->
    </script>

    <h1>Random Background Demo</h1>
    
    <script language="JavaScript"
          type="text/javascript">
    <!--
    document.write("Using background image "+image[index])
    </script>
    -->
</body>
</html>

DE

Kimber · 06-29-2004, 05:47 PM

Ooh, thanks heaps, will give it a go

azlatin2000 · 06-29-2004, 06:05 PM

Oh, yeah i forgot about the url() thing. I was planning to use the old non css way then in the middle of writing the code i changed my mind.

Kimber · 07-04-2004, 11:37 PM

Finally got round to implementing it, and thanks heaps, it worked.

Free school4u · 07-05-2004, 12:24 PM

can you please tell me the background code just the simple one that remains constant. can anyone tell me where i could find these types of simple codes? Thank you very much to whoever helps, I need it

pascal · 07-06-2004, 02:54 AM

Code:

<html>
<head>
<style type="text/css">
body{
background: URL(image.jpg);
}
</style>
</head>
<body>
content of the page

</body>
</html>

Save this as .html file, and the image you want as background-image, is, in this example, called image.jpg, that image-file MUST be in the same folder as the .html file.

Pascal