La idea es tener un fondo base:
Y ponerle por encima un degradado PNG para hacerlo mas bonito:
Para mí queda espectacular:
Lo que hago es colocar dos divs de tamaños 100% en position:fixed, uno con z-index:-2 (puntos) y el otro con z-index:-1. El codigo es:
Código PHP:
#fondo1 {
background-image: url("img/puntos.gif");
position: fixed;
width:100%; height:100%;
top:0px; left:0px;
z-index:-2;
}
#fondo2 {
background-image: url("img/fondo_degradado.png");
position: fixed;
top:0px; left:0px;
width:100%; height:100%;
z-index:-1;
}
Código PHP:
<div id="fondo1"> </div>
<div id="fondo2"> </div>
Ahora viene el problema: sólo me funciona bajo Opera.
En firefox los z-index no me hacen ni caso. Los negativos hacen desaparecer las capas, los positivos tapan toda mi pagina (aunque la pagina tenga z-index:100).
Del IE ni hablamos... por cierto hay alguna esperanza de que funcione?
¿Como hago que funcione en mozilla?