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


Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

you've a huge amount of plugin doing this task, what do you think about using one?
for example supersized :
Demo (random background) :

Google for : << jquery plugin fullscreen image >>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
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!

Rowby GorenAuthor Commented:
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.


Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Your script simply slects randomly one image between the six available. Are you looking for another criteria to load and change the images?
Rowby GorenAuthor Commented:
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.

Rowby GorenAuthor Commented:
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.
Rowby GorenAuthor Commented:
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.
Rowby GorenAuthor Commented:
It turned out I used supersidzed and it worked excellently -- no conflicts, etc.

Rowby GorenAuthor Commented:

The correct awards are now in place for : leakim971   Thank you Moderator
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.