Question

I am trying to overlay three containers here to do different operations on them. The three containers are

body: z-index 1
div (that has to be be same size as that of body to be used for fading the background): z-index 2
canvas div (for animations over the faded background): z-index 3

Here’s the fiddle where I am trying to overlay the three divs, to get the above effect but is not working due to unknown reasons. http://jsfiddle.net/NXBg5/1/

Any suggestions?

Answer 1

Firstly, an opening { was missing.

Also, you should set the html and body sizes, since if there is no or few content on your page, they will not take the whole visible size.

Finally, you should put your second div in position: absolute so as it does not push your canvas outside of the page.

Final version: http://jsfiddle.net/62pJr/