Can't make webGL background of page

Hi guys,
First I apologise if this is a CSS positioning issue and if it is, I can repost it to the CSS forums or a moderator could move it, but I would really appreciate any help any way.
I was playing with a webGl experiment I found that makes this cool clouds effect, here it is alone, and I wanted to make it look like the title scene to the tv show The Simspons.

So I used CSS3 fonts to display the text in said font from the simpsons and it works fine when supported as seen here with the webGL commented out.

However when combining them and uncommenting everything, I was unable to bring the simpsons text above the clouds no matter what I tried-- even z-index’s

Here is my attempt at them together.
Do you guys have any suggestions on how I could make the webGL be the background or just behind the text, or if I were to develop other webGL behind all other elements.

I would really appreciate any help and I hope to hear from you guys soon.

Thanks in Advance & Regards,
Team 1504.

P.S. This is a sample image of the Simpsons’ title image in the case you did not know.

I cannot help because your page insists that I downgrade from Chrome 11 to Chrome 10.

Just a tip: browser version checking is a technique designed to eff people off.
Instead, check that the browser is capable of performing the desired tasks, commonly called object detection.

Really?
I hate browser version checking and I know it is an annoying and, in my opinion unnecessary, script.
I don’t remember putting any version checking, but I’ll look and get back to you.

Again, I sincerely apologise and I really do appreciate the help :blush:

I am pretty sure I removed the browser detection now :slight_smile:

Currently the page is complaining about getWebGLErrorMessage not existing. I suggest that you re-enable that part (I’m on an old laptop right now).

You may want to reword the browser version message though so that it’s more explicit about the reason.