Si comienza a trabajar con imágenes de fondo, sin duda se encontrará con el escenario en el que desea que una imagen se estire para ajustarse a la página. Esto es especialmente cierto en el caso de los sitios web con capacidad de respuesta que se entregan a una amplia gama de dispositivos y tamaños de pantalla.

Este deseo de estirar una imagen de fondo es un deseo muy común para los diseñadores web porque no todas las imágenes caben en el espacio de un sitio web. En lugar de establecer un tamaño fijo, estirar la imagen permite que se flexione para adaptarse a la página sin importar lo ancha o estrecha que sea la ventana del navegador.

La mejor manera de estirar una imagen para que se ajuste al fondo de una página es usar la propiedad CSS3, para el tamaño del fondo. He aquí un ejemplo que utiliza una imagen de fondo para el cuerpo de una página y que establece el tamaño al 100% para que siempre se estire y se ajuste a la pantalla.

cuerpo {
> fondo: url(bgimage.jpg) no-repeat;
tamaño de fondo: 100%;
.

Según caniuse.com, esta propiedad funciona en IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, y en todos los principales navegadores móviles. Esto le cubre para todos los navegadores modernos disponibles hoy en día, lo que significa que debe utilizar esta propiedad sin temor a que no funcione en la pantalla de alguien.

Fingiendo un fondo estirado en navegadores antiguos

Es muy poco probable que necesite admitir navegadores anteriores a IE9, pero supongamos que le preocupa que IE8 no admita esta propiedad. En ese caso, puede falsificar un fondo estirado. Y puedes usar los prefijos del navegador para Firefox 3.6 (-moz-background-size) y Opera 10.0 (-o-background-size).

La forma más fácil de falsificar una imagen de fondo estirada es estirarla por toda la página. De este modo, no tendrá más espacio ni tendrá que preocuparse de que su texto quepa en el área estirada. Cómo hacerlo:

/

1. Primero, asegúrese de que todos los navegadores tengan una altura del 100%, 0 márgenes y 0 relleno en los elementos andHTML BODY. Coloque lo siguiente en el encabezado de su documento HTML:
2. Añade la imagen que quieres que sea el fondo como primer elemento de la página web, y dale el id de «bg»:
3. Coloque la imagen de fondo de manera que quede fijada en la parte superior e izquierda y sea 100% ancha y 100% alta. Añada esto a su hoja de estilo:
   1. img#bg {
   2. posición: fija;
   3. top: 0;
   4. izquierda: 0;
   5. ancho: 100%;
   6. altura: 100%;
4. Añada todo su contenido a la página dentro de un elemento DIV con un identificador de «contenido». Agregue el DIV debajo de la imagen: Todo su contenido aquí – incluyendo encabezados, párrafos, etc.
   1. Nota: es interesante ver tu página ahora. La imagen debería mostrarse estirada, pero su contenido está completamente ausente. Por qué? Debido a que la imagen de fondo es 100% en altura, y la división de contenido es después de la imagen en el flujo del documento – la mayoría de los navegadores no la muestran.
5. Coloque su contenido de manera que sea relativo y tenga un índice z de 1. Esto lo llevará por encima de la imagen de fondo en los navegadores que cumplen con los estándares. Añada esto a su hoja de estilo:
   1. #contento {
   2. posición: relativa;
   3. Índice Z: 1;

1. Pero no has terminado. Internet Explorer 6 no cumple con los estándares y todavía tiene algunos problemas. Hay muchas maneras de ocultar el CSS de todos los navegadores excepto IE6, pero la más fácil (y menos probable que cause otros problemas) es usar comentarios condicionales. Ponga lo siguiente después de su hoja de estilo en el encabezado de su documento:
2. Dentro del comentario resaltado, agregue otra hoja de estilo con algunos estilos para que IE 6 juegue bien:
3. Asegúrese de probar en IE 7 e IE 8 también. Es posible que tenga que ajustar los comentarios para apoyarlos también. Sin embargo, funcionó cuando lo probé.

OK – esto es, sin duda, una exageración. Muy pocos sitios necesitan soportar IE 7 u 8, mucho menos IE6! Como tal, este enfoque es anticuado y probablemente innecesario para usted. Lo dejo aquí más como un modelo de curiosidad por saber cuánto más difíciles eran las cosas antes de que todos nuestros navegadores jugaran tan bien juntos.

Fingiendo una imagen de fondo estirada sobre un espacio más pequeño

Puede utilizar una técnica similar para falsificar una imagen de fondo extendida a través de un DIV u otro elemento de su página web. Esto es un poco más complicado ya que tienes que usar el posicionamiento absoluto o tener problemas de espaciado extraño para otras partes de tu página.

1. Poner la imagen en la página que quiero usar como fondo.
2. En la hoja de estilo, establezca un ancho y un alto para la imagen. Nota, puedes usar porcentajes para la anchura o la altura, pero me resulta más fácil ajustar con valores de longitud para la altura.
   1. img#bg {
   2. ancho: 20em;
   3. altura: 30em;
3. Coloque su contenido en un div con la identificación «content» como hicimos arriba:Todo su contenido aquí
4. Estilice el contenido div para que tenga el mismo ancho y alto que la imagen de fondo:
   1. div#content {
   2. ancho: 20em;
   3. altura: 30em;
5. A continuación, coloque el contenido a la misma altura que la imagen. Así que si tu imagen es 30em tendrás un estilo de top: -30em; No olvides poner un índice z de 1 en el contenido.
   1. #contento {
   2. posición: relativa;
   3. arriba: -30em;
   4. Índice Z: 1;
   5. ancho: 20em;
   6. altura: 30em;
6. A continuación, añada un índice z de -1 para los usuarios de IE 6, como hizo anteriormente:

Una vez más, con el tamaño del fondo disfrutando del amplio soporte de navegadores que tiene ahora, es muy probable que este enfoque sea también innecesario y se presente como un producto de una era pasada. Si desea utilizar este método, asegúrese de probarlo en tantos navegadores como pueda. Y si su contenido cambia de tamaño, tendrá que cambiar el tamaño de su contenedor y la imagen de fondo, de lo contrario, terminará con resultados extraños.