Z-Index headaches...

z-index always causes me grief too.
Have you tried z-index 1?

Can we see the page you're having trouble with?

Don't know the javascript trick for watermarking. I've always done it in the graphics program. But I'm too lazy to watermark at all anymore.

I think that if you set the text to Z-index 1, and the picture either 0 or -1 it may work. I've never used them, but I was just reading up on them today.

Sorry, I was distracted by my son and hadn't read your question correctly.

Quote: Looking up possible solutions to this problem I read that z-index only works against other absolute positioned objects.

Sort of. The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order. So if you only have z-index on one element and give it a positive number, it's going to be on top of everything else. If you give it a negative number... it'll be under everything. The z-index only works on elements that have been positioned (eg position:absolute or posititon:relative).
... I guess you've seen this first hand.

The only thing I can think of is...
1) Give your watermark a z-index of 0 or 1 and put everything that you want on top of it in its own div with a z-index larger than your watermark.

2) Give your watermark a z-index of -1 and anything you want behind it make that z-index -2.

3) Forget the z-index alltogether and create a background image that is your watermark. Put it on your page, div, table cell, etc. (preferably using css)

Sorry I couldn't be any more help!

Hmm... I've seen other examples that are working like http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex2 but mine doesn't work. Maybe since I'm using a generic html element created by javascript it doesn't work.

You notice that the image is set to z-index:-1. That places it behind everything else (even though they don't have a z-index).

It's a bit complicated, but once you get it, you'll be amazed at the tricks you can do with it.

But when I set my element to -1 I don't see it. Also when I set my element to 1 and a large div to 2 my element is still on top.

Do you have background colors or images in any divisions or tables that sit over your watermark?

If you give us a link to the page you're having trouble with, we might be able to track it down more quickly.

I found out what it is. The html element type created by my javascript doesn't work with z-index. I need to find out more about creating elements using javascript. I'll go look that up.

Ahh well... at least you know what the problem is then.
Good luck with it!
Let us know what you find.

Ahh, it's not going to work. I wonder if there is a way to create background images dynamically with javascript...

I've got to ask...
Is there a reason you need to create the images with javascript?
Are the images just words or is there a picture involved?

I can see what I can find for you.

One more question...
You said

Quote: create background images dynamically

Are you loading a different background on each page? Does the image change if someone clicks a link or picture?
I think I could help you better if I know what exactly you want to do.

Basicly I wanted to have in the background randomly splattered all over the page both the websites name or logo and the specific pages name or logo. I was going to make them look faint like a real watermark and have them at different sizes / z-indexes so it looked 3d.

Needless to say, ordinary html / css doesn't have this function but with java script I was able to do everything except the z layering. I even had the javascript detect the x y size of the page (not just the window) and create a number of watermarks based the size so that it wasn't too crowded/sparse. Would have been cool.

If I use plain css all I can do is have an even patterned grid of the watermarks, and if I wanted to do the page name thing I will have to have a different background image for each page.

Sounds very cool! I'm still just a bit confused on how you're doing it.

Are you saying you have strait text that you want to convert to a background image or do you have images that you want to place in "random" spots on the background of your different pages?

Bear with me... it takes me awhile to catch on.

I guess it doesn't matter because it doesn't seem possible. For some reason the elements created dynamically by javascript couldn't be z-indexed properly. Anyways I deleted the script and just replaced it with a generic moving watermark script.

But here is how I did it up to the point where it failed:

1. When the page loads, at the bottom right corner of the entire document there is an invisible image. That image on loading loads my watermark script.

2. The watermark function detects the absolute position of the image, thus knowing the total size of the document. It multiplied the x by the y and divided that by 3000 and that was the number of background images to be loaded.

3. The watermark function then enters into a loop (ending after x*y/3000 cycles) and creates an html element each time, giving it a random position on the document. This is also where I set the zindex to no avail. I know I was setting the zindex because I read it back in an alert.

And that is pretty much how it worked. It would have been a very good and dynamic substitute for backgrounds if I could only have gotten the zindex to work. Because you can tweak each individual background element with javascript you would have had a really wide array of options. Like I could have had each randomly select one of xnumber of images, or had those images or texts be random sizes. What I was going to do was have each image/text one of 5 random sizes/zlayers/shades, so that a closer appearing one would have had a higher zindex, been a larger size, and been a bit dark. The farther appearing ones would be the opposite. It would have created a very cool multilayered effect.