This should be quite easy, and I have done some research on this. I have spliced code from here, here, here, and other places, but I can't get this to work.

I have a webpage which has 3 .pngs layered on top of each other. The top two are variable sized, and 100% of the page. The top one has a hole in it (it's transparent in the middle), and the middle disappears using Javascript to reveal the bottom one. The top two .pngs and the Javascript are working perfectly.

I want the bottom image to be in the exact center, vertically and horizontally, and be proportional to the page size. I can get it centered, or proportional, but not both. I can't put the bottom picture as the background, because then the background isn't the right color, or it's tiled.

Here is a sample of some of the code:

HTML:

<body> <div > <p0 id="face" ><img src="face2.png"; class='face'> </p0> </div> <p1 id="circuit" > <img src= 'circuit.png' width = '100%' height = '100%' /> </p1> <p2 id="hole" ><img src="hole.png" width='100%' height = '100%' /> </p2> </body>

CSS: