Random Background Image doesn't work in Firefox/IE

Forum Moderators: open

Message Too Old, No Replies

Random Background Image doesn't work in Firefox/IE

Javascript issues

ggirl

9:48 pm on Feb 10, 2008 (gmt 0)

I copied the code from javascriptkit - it works 90% of the time in Safari, does not work in Firefox nor in IE... any ideas!?! here is the code - I do not get any errors in Firefox.... created file in dreamweaver. In Safari, the other 10% of the time I get a black screen, no image.

===================

-->
</style>
<script type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function MM_displayStatusMsg(msgStr) { //v1.0
status=msgStr;
document.MM_returnValue = true;
}
//-->
</script>
</head>
<script>

var randombgs=["/random/deli.jpg", "../random/hojos.jpg", "../random/bill.jpg", "../random/fgprk.jpg", "../random/fgpo.jpg", "../random/fgpo_ss.jpg", "../random/tulip.jpg", "../random/cat.jpg"]

document.write('<body background="'+randombgs[Math.floor(Math.random()*randombgs.length)]+'" bgcolor="#FFFFFF">')
</script>

</html>

penders

10:42 am on Feb 11, 2008 (gmt 0)

The code you've posted should work OK (tried in IE6, FF2 and Op9), although you are missing a closing BODY tag:

</body> 
</html>

However, I would check the path to your images. Your first image for instance has a different path to the others!?

ggirl

5:39 pm on Feb 11, 2008 (gmt 0)

i added the body tag, still no good. if i don't get flagged, here is the www - fgpo.org

perhaps you can look at it there? thanks
g

penders

11:35 pm on Feb 11, 2008 (gmt 0)

I think the problem is that in your CSS you specify NO background-image for the body. This will take precedence over the background attribute on the body which you are writing out with JavaScript. So the background attribute is essentially being ignored.

Try removing the background-image rule from your CSS.

body { 
 background-color: #000000; 
 background-repeat: no-repeat; 
 margin-left: 0px; 
 margin-top: 0px; 
 margin-right: 0px; 
 margin-bottom: 0px; 
 background-image: url(); 
}

CSS will always take precedence over HTML attributes.

Also check... in your CSS you are specifying a

background-color

of #000000 (black), but in your HTML/JavaScript you are setting

bgcolor="#FFFFFF"

(white). And you are setting

background-image:no-repeat

so presumably you don't want the background image to tile?

ggirl

12:19 am on Feb 12, 2008 (gmt 0)

that was it! THANK YOU! i was running in circles.