troubleshooting Question

Background image "changes" upon click to next webpage

Avatar of Rowby Goren
Rowby GorenFlag for United States of America asked on
11 Comments1 Solution443 ViewsLast Modified:

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);

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;


Join our community to see this answer!
Unlock 1 Answer and 11 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 11 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros