BG Effects; Full Size Image

[iwanbo]

I'm fairly new to java, it's been a good year or two since I've made any websites, and my friend and I are working on one.

Our problem is that our background image is perfect for users with 1024x768 res. (have the bg set on fixed so it doesn't scroll) on their computers, but people with higher or lower rez, it looks REALLY bad :(

So I started to look for a script that could auto-resize the image, and came across this one (http://javascript.internet.com/bgeffects/full-size-image.html). All fine and dandy, but the thing is, the image appears/stretches OVER everything else (is appearing infront of the text and whatnot), when it's supposed to be the background image.

I hit a brain fart and am not sure how to set it so with this script, it's my background image that auto-resizes to whatever res/size the browser is at. Any help would be greatly appreciated!

Thanks ahead of time! :)

[boojum]

does the script ever set the z-index to a negative number? the <div id="backgroundLayer"> starts out as z-index:1 in the html

[iwanbo]

ahh, okay, got it behind everything! Thanks a ton!

One last question now :p
Any possible way to make it fixed so it doesn't scroll?

[boojum]

position: fixed
by the way, netscape doesnt do negative z-index as far as i know, so you might want to have your background default z-index instead and make everything else some positve z-index, like ten or something (so you can sandwich in more stuff later if you want)

[edit: you talking about overflow i think, overflow:hidden will cut off what ever doesnt fit in the box, but i have an old note to myself here saying "mozilla doesnt like overflow:scroll" so i would test it first]

[boojum]

position: fixed
by the way, netscape doesnt do negative z-index as far as i know, so you might want to have your background default z-index instead and make everything else some positve z-index, like ten or something (so you can sandwich in more stuff later if you want)

[iwanbo]

After I change Postion from absolute, to fixed, it appears at the top of the site :(

I uploaded the htm file I was trying it on.
http://iwanbo.netfirms.com/autosizenotworking.htm

that's the address if you want to look at the source and check if I'm doing anything wrong.

really appreciate the help boojum :)

[boojum]

if(is.ie4 || is.ie5 || is.ns6 || is.ns4) {
image1_width = (available_width * 1.00);
image1_height = (available_height * 1.00);
var image1 = '<img src="http://mywebpage.netscape.com/Iwanbo/bgmid.jpg" width="' + image1_width + '" height="' + image1_height + '">';



/* i think this is just pasting it on after the first background, rather than changing the original or what ever its supposed to do. change the actual attributes of the node itself instead. */

document.write(image1);
}

i think what you wanted was overflow:hidden. at any rate, take what i wrote in the comments with a grain of salt, i'm new to javascript + DOM