Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
[edited by: DrDoc at 2:41 am (utc) on July 20, 2004]
The problem is that the stylesheet object doesn't differentiate between inline, embedded, external and imported stylesheets. It reads from all these sources and creates a stylesheet object that reflects the active, or current, style settings on the page. This can make dubious work of identifying exactly where and how to reference an object in the array. If you use ONE stylehseet and nothing inline or embedded, it's a little easier.
Overall, you'd probably be better off using a JS script that picks the image and places it in the source, rather than altering the stylesheet object to change a background image. Otherwise, read up on the stylesheet object array and how to manipulate it.
Note: One thing that might make it easier is to put the rule declaration containing the background image to be randomized near the top of your CSS, perhaps right after the body styles. This will make it object  or  in the array and simplify alterations.
Note2: There are MANY very skilled JS scripters in the JvaScript forum, and some of them very rarely venture over here to CSS-Land. I'd advise you to take this question to them for further guidance. (Not that you won't get many well-informed opinions here...)
Step 1: Make an array of background-image src's.
Step 2: Then, on onload of body, randomly choose a one src from the array, and make that the background-image for the element you want.
var backgroundSrcs = new Array(2)
document.getElementById("bodyElement").style.backgroundImage = "url('" + backgroundSrcs + "')";
<body id="bodyElement" onload="pickimage()">
Note: I didn't implement the random picking of the image, obviously, though that should be pretty easy to do. I can't recall a random number function for js atm.
Also, move the id="bodyElement" to whatever element you want, and voila, you're done.
<title>Random Masthead Background</title>
//Edit this line to list all of your background images
var backgroundSrcs = new Array("ss-001.gif","ss-002.gif","ss-003.gif","ss-004.gif")
//This line picks an image at random from the list you entered above
//This line applies the background image to your masthead
document.getElementById("masthead").style.backgroundImage = "url('" + bgimage + "')";
I've used a div tag for the masthead but you could use a table or paragraph if you wish.
Just make sure that you add the id="masthead" part.
<p>Your Masthead Goes Here</p>
<div>The rest of your page goes here</div>
Here's the page I posted:
It's exactly the code you supplied, except I'm pointing to my background images.
Help! Ultimately I'm trying to rotate the background image on this page:
[edited by: DrDoc at 5:13 pm (utc) on Aug. 16, 2004]
[edit reason] Welcome to WebmasterWorld! [WebmasterWorld.com] [/edit]
document.getElementById("masthead").style.backgroundimage = "url('" + bgimage + "')
Should instead be:
document.getElementById("masthead").style.background = "url('" + bgimage + "')
Only one problem with this solution, sparky. If the 'masthead' element has background settings other than this image (a color, for example) your script will overwrite it with only the background-image and the color setting will be lost.
The 'official' solution should be this, with the changed/different part in bold...
document.getElementById("masthead").style.backgroundImage = "url('" + bgimage + "')
Use this option and you remove the risk of unintentionally erasing other properties from the style array.