Link to home
Create AccountLog in
Avatar of Rowby Goren
Rowby GorenFlag for United States of America

asked on

Background image "changes" upon click to next webpage


I have am working on an old site that has a background image that, via javascript, changes when someone goes to another page on the site. I think the javascript snippet been around for awhile, and is probably pretty bullet proof.  It's in the header of every  webpage.

However, I am thinking can there be some improvement?  For example I would jquery be "better" than javascript?  I don't know much, if anything, about javascript and jquery, but it seems that "Jquery" seems pretty popular these days.

But more importantly I don't want the images to tile.  I want each image to stretch to the width and height of the browser window.  No repeats.  

Here is the script that currently have on the site.  Any suggestions to get it to just stretch height and width of the image?  No tiling?

I see two scripts.  The first one I think has nothing to do with the image changing script, but I am not sure, so I am including it.  

<script type="text/javascript"><!--//--><![CDATA[//><!--
  sfHover = function() {
     var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
        sfEls[i].onmouseout=function() {
           this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  if (window.attachEvent) window.attachEvent("onload", sfHover);

Open in new window

After the above script, in the page header, is the following script, which I think it the actual script and perhaps does not need the above script for it to work.  But I am ignorant about javascript -- and may be wrong :)

<script language="JavaScript">

var randnum = Math.random();
var inum = 6;
// Change this number to the number of images you are using.
var rand1 = Math.round(randnum * (inum-1)) + 1;
classes = new Array;
classes[1] = "bg0";
classes[2] = "bg1";
classes[3] = "bg2";
classes[4] = "bg3";
classes[5] = "bg4";
classes[6] = "bg5";

// Ensure you have an array item for every image you are using.
var classy= classes[rand1];

function setBackground() {
  if (document.body) {

    document.body.className = classy;

Open in new window


Avatar of leakim971
Flag of Guadeloupe image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Rowby Goren


HI leakim971,

Supersized looks good. I downloaded the files and checked the documentation and will try it in the morning

--- and report back!

Thanks for helping on this!

Hi leakim971,

Did a test this morning with supersized, and it looks great.

I'll be working on the site today and let me just make sure there are no unexpected conflicts.

I'll report back later today and expect to award you the points.


Your script simply slects randomly one image between the six available. Are you looking for another criteria to load and change the images?
Hi  Sar1973P

Basically I want one background image to load, and not change until a page refresh -- or more specifically when someone goes to the next "page".

However I am 99 percent sure that Supersized,, recommended by leakim971 will work for me.  I have it installed, and am just making sure it doesn't have any conflicts with my other elements on the site.

I've requested that this question be closed as follows:

Accepted answer: 0 points for rowby's comment #a39772852

for the following reason:

Supersize worked perfectly  Thanks so much.
Ooops. I selected me for the points.

Moderator please undo the points and I will fix it.
Moderator please undo the points and I will fix it.
It turned out I used supersidzed and it worked excellently -- no conflicts, etc.


The correct awards are now in place for : leakim971   Thank you Moderator