A partir de
IE 7 podemos decir que este truco funciona en todos los navegadores. lo malo es que sirve sólo para imágenes. Más aún, para imágenes de fondo.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>FONDO REEMPLAZADO.</title>
<style type="text/css">
html {height: 100%;}
body {font-size: 100%; height:200%; width: 200%; padding:0; margin:0;
background:#000000; color: #ffffff;
background-image: url(http://static.forosdelweb.com/fdwtheme/images/statusicon/forum_old.gif);
background-attachment: fixed;}
h2 {background-color: #000000; }
.caja {font-size: 150%; height:2.5em; width: 10em; font-weight: bold;
padding:10px 20px; margin-top: 20%; margin-left: 40%;
background-color: blue; background-attachment: fixed;
background-image: url("http://static.forosdelweb.com/fdwtheme/images/statusicon/forum_new.gif");
overflow: auto; color: #000000; }
</style>
</head><body>
<h2>Al desplazar el contenido se reemplaza la imagen de fondo.</h2>
<div class="caja">
FOROS DEL WEB<BR>
FOROS DEL WEB<BR>
FOROS DEL WEB<BR>
FOROS DEL WEB</div>
</body></html>
El efecto aparece porque todos los
background-attachment: fixed toman como origen el mismo del documento. Poniendo igual diseño, con distintos colores en el
body y en una capa desplazable, ésta crea la ilusión de un reemplazo de colores al moverse.
No sirve para versiones más viejas del
MSIE, porque cada fondo se fijaba al elemento de origen en que estaba declarado. Que por otro lado es lo que corresponde.
Vamos a creer que
IE 6 fue el último navegador coherente de
Microsoft.
De cualquier forma, si podemos aprovechar estos bugs para inventar nuevos efectos, está muy bien. Ahora sólo nos resta buscar un código para que todos los navegadores pongan los fondos como lo hacía el
IExplorer 6; por si alguna vez necesitamos que se vean donde deben.
En este enlace hay más efectos para probar
http://www.cssblog.es/truco-de-scrol...-css/#more-648