cant get javascript document.write images to be under other content

this is sort of a javascript/html/css question:

im using a javascript to randomly position many small images on the page,
and i want them to be in the background relative to other content on the page. for example, the command below is run a bunch of times in a javascript in my header, which i call from the body:

document.write('<img src="./images/' + img_rnd[i] + '" style="z-index: 1; position: absolute; left:' + x[i] + '; top: ' + y[i] + '; width: ' + img_width + '; height: ' + img_height + ';"></img>');

despite setting z-indexes to 2 for my divs/layrs/tables in the body, i cant get them to overlap the images positioned by the document.write call.

is there a better/different way to get these images to be "in the background"?

thanks,
sam

In my oppinion you should have used DOM methods to create the elements and their attributes, not the obsolate document.write() method

so what your saying is use statements like??

document.images[i].src="./images/" + img_rnd[i];
document.images[i].height=img_width;
document.images[i].width=img_height;

can i use the DOM to position, resize, and layer the images
behind other content?

Could be something like this:

//inside your i loop
...
var root=document.getElementById('mydiv'+i);//the node where to append the image
var pic=document.createElement('img');
var att=[
['width',img_width],['height',img_height],['src','./images/'+img_rnd[i]]
]
for(var j=0;j<att.length;j++){
pic.setAttribute(att[j][0],att[j][1]);
}
var css=[
['position','absolute'],['zIndex',1],['left',x[i]+'px'],['top',y[i]+'px']
]
for(var j=0;j<css.length;j++){
pic.style[css[j][0],css[j][1]];
}
...
root.appendChild(pic);