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.