Estirar la imagen como fondo

Necesito una imagen para estirar como fondo de la página. No importa si la página no se escalará bien, sea cual sea la resolución de la pantalla, toda la imagen debe estar visible en la pantalla. Encontré algunas soluciones en Google, pero o no funcionó en Firefox2 o IE6 o en ambas, y las necesito también. Odio cuando las personas no actualizan su software, pero sigo viendo estos navegadores en los datos de análisis de Google que llegan a la página web, especialmente IE6.

¿Hay una buena solución de navegador cruzada para esto?

Puede usar una buena etiqueta img pasada de moda, sin atributos de alto y ancho. En su CSS, colóquelo con un bajo índice Z, ajuste alto y ancho a “100%”.

Pon todo lo demás en la página en otro div con un índice z más alto

Me gusta esto:

 ...  
...

Consulte http://axoplasm.com/lost.html para ver un ejemplo.

No es exactamente una “imagen de fondo” (y probablemente no es compatible con los estándares del W3C) pero funciona.

No quiero secuestrar esta pregunta, pero si tuvieras este código:

 background-image: url('images/background.gif'); background-size: 100%; 

Esto repite la imagen en todos los navegadores actuales (IE, FF, GC, SF, OP), que aunque desagradable funciona en todos los navegadores, a diferencia del método de profundidad z-index (tengo un primer plano complejo).

Sin embargo, si un navegador recibiera repentinamente compatibilidad con CSS3 de tamaño bg, ¿dice la especificación de CSS3 qué debería suceder? ¿Debería estirar la imagen o hacer lo que siempre hizo y repetir?

No es posible en CSS1 o CSS2, sin embargo, es posible en CSS3: requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/

Sin embargo, esto no está disponible para IE6.

Una alternativa sería usar background-repeat, o este sitio tiene algo que podría funcionar (no he comprobado si funciona): webdesign.about.com/od/css3/f/blfaqbgsize.htm

Sé lo que quieres decir con respecto a que los usuarios no actualizan los navegadores, pero ¿en qué punto dejas de codificar IE5, o incluso IE4?

Buena suerte,

Mate

Una buena alternativa sería usar una “imagen estática” que se desvanezca en un patrón o color sólido. De esta forma, obtendrá su imagen de fondo (independientemente de lo grande que la quiera) y la escalabilidad.

En CSS3, puede usar background-size: 100%;

Firefox 3.5 es compatible con algunas propiedades de CSS3, pero no creo que apoyen TODO aún … (Creo).