Fondo transparente e imagen sobre el

[seijas88]

Hola. Por favor, llevo muchísimo tiempo dándole vueltas a esto y no consigo realizarlo como a mi me gustaría.

A ver si soy capaz de explicarme.

He realizado una página web bastante extensa, y quisiera realizar un añadido en la misma. Hemos introducido un anuncio publicitario en el index de la web. Es como un thumbmail y queremos que al pinchar en el se muestre en grande. Para ello uso divs, la idea es que esa imagen se muestre en grande en un div mientras el fondo de la página se oscurece. Lo de mostrar la imagen en grande no hay problema pero lo del fondo... Lo quiero hacer mediante un div que ocupe todo el contenido de la página dandole un color oscuro y transparencia.

En firefox casi lo consigo usando el height 100% pero tampoco porque si el contenido excede el área visible de la página, al hacer scroll la parte que no se veia no está cubierta por ese div, y en explorer ya ni me cubre la página porque creo que para que height 100% funcione los divs padres también tienen que tenerlo y eso me es imposible por el diseño de la web.

Lo que yo quiero es un div transparente que me ocupe toda la página ajustándose a la resolución de pantalla que tengamos, pero que si desplazamos la página con scroll el div de fondo siga ahi, no se vea blanco. Tanto en explorer como en Firefox.

Hay una forma que he visto :

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.body.clientWidth,
viewportheight = document.body.clientHeight

}

// older versions of IE

else
{
viewportwidth = window.screen.availWidth,
viewportheight = window.screen.availHeight;
}

que casi me sale, pero en explorer aumenta el tamaño del fondo, me sale la barra de scroll horizontal cuando no debería y me aumenta la vertical y en firefox no me cubre el área que no se ve.

Por favor se que es muy extendo el post pero necesito explicarlo bien y que alguien me ayude por Dios.

Muchas gracias