Utilice CSS3 para estirar una imagen de fondo para ajustar una página web

Las imágenes son una parte importante de los diseños atractivos de sitios web. Esto incluye el uso de imágenes de fondo. Estas son las imágenes y gráficos que se utilizan. detrás áreas de una página en lugar de imágenes que se presentan como parte de las páginas de contenido. Estas imágenes de fondo pueden agregar interés visual a una página y ayudarlo a lograr el diseño visual que puede estar buscando en una página.

Si comienza a trabajar con imágenes de fondo, sin duda se encontrará con el escenario en el que desea que la imagen se estire para adaptarse a la página. Esto es especialmente cierto para los sitios web receptivos que se envían 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 encajan en el espacio de un sitio web. En lugar de establecer un tamaño fijo, estirar la imagen le permite flexionarse para adaptarse a la página sin importar qué tan ancha o estrecha 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 de fondo. Aquí hay un ejemplo que usa una imagen de fondo para el cuerpo de una página y que establece el tamaño en 100% para que siempre se estire para ajustarse a la pantalla.

cuerpo { fondo: url (bgimage.jpg) no-repetir; 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 lo cubre para todos los navegadores modernos disponibles en la actualidad, lo que significa que debe usar 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 deba admitir navegadores más antiguos que IE9, pero supongamos que le preocupa que IE8 no admita esta propiedad. En ese caso, puedes falsificar un fondo estirado. Y puedes usar los prefijos del navegador para Firefox 3.6 (tamaño de fondo) y Opera 10.0 (-o-fondo-tamaño).

La forma más fácil de falsificar una imagen de fondo estirada es extenderla por toda la página. Entonces no terminará con espacio adicional o tendrá que preocuparse de que su texto se ajuste al área estirada. Aquí está cómo hacerlo:

id = "bg" />

1. Primero, asegúrese de que todos los navegadores tengan una altura del 100%, 0 márgenes y 0 rellenos en el yHTML CUERPO elementos. Coloque lo siguiente en el encabezado de su documento HTML:
2. Agregue la imagen que desea que sea el fondo como el primer elemento de la página web y asígnele el carné de identidad de "bg":
3. Coloque la imagen de fondo de modo que quede fija en la parte superior e izquierda y tenga un ancho del 100% y una altura del 100%. Agrega esto a tu hoja de estilo:
   1. img # bg {
   3. posición: fijo
   5. arriba: 0;
   7. izquierda: 0;
   9. ancho: 100%;
   11. altura: 100%;
   13. }
4. Agrega todo tu contenido a la página dentro de un Div elemento con un carné de identidad de "contenido". Añade el Div debajo de la imagen:Todo su contenido aquí, incluyendo encabezados, párrafos, etc.
   1. Nota: es interesante mirar tu página ahora. La imagen debe mostrarse extendida, pero su contenido falta por completo. ¿Por qué? Debido a que la imagen de fondo tiene una altura del 100% y la división de contenido es después la imagen en el flujo del documento, la mayoría de los navegadores no la mostrarán.
5. Posiciona tu contenido para que sea relativo y tenga una índice z de 1. Esto lo colocará por encima de la imagen de fondo en los navegadores compatibles con los estándares. Agrega esto a tu hoja de estilo:
   1. #contenido {
   3. posición: relativa;
   5. índice z: 1;
   7. }
6. Pero no has terminado. Internet Explorer 6 no cumple con los estándares y aún tiene algunos problemas. Hay muchas formas de ocultar el CSS de todos los navegadores, excepto IE6, pero la forma más fácil (y menos probable de causar otros problemas) es usar comentarios condicionales. Coloque lo siguiente después de su hoja de estilo en el encabezado de su documento:
7. Dentro del comentario resaltado, agregue otra hoja de estilo con algunos estilos para que IE 6 juegue bien:
8. Asegúrese de probar en IE 7 e IE 8 también. Es posible que necesite ajustar los comentarios para apoyarlos también. Sin embargo, funcionó cuando lo probé.

OK, esto es, sin duda, una manera excesiva. 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 sobre cuánto más difíciles fueron las cosas antes de que todos nuestros navegadores jugaran tan bien juntos!

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

Puede utilizar una técnica similar para simular una imagen de fondo estirada a través de un Div u otro elemento en su página web. Esto es un poco más complicado ya que tiene que usar posicionamiento absoluto o tener problemas de espaciado extraños para otras partes de su página.

1. Coloque la imagen en la página que quiero usar como fondo.
2. En la hoja de estilo, establezca un ancho y alto para la imagen. Tenga en cuenta que puede usar porcentajes para el ancho o la altura, pero me resulta más fácil ajustar los valores de longitud para la altura.
   1. img # bg {
   3. ancho: 20em;
   5. altura: 30em;
   7. }
3. Coloque su contenido en un div con el carné de identidad "contenido" como hicimos anteriormente:Todo tu contenido aquí.
4. Diseñe la división de contenido para que tenga el mismo ancho y alto que la imagen de fondo:
   1. div # content {
   3. ancho: 20em;
   5. altura: 30em;
   7. }
5. Luego coloque el contenido hasta la misma altura que la imagen.Entonces, si tu imagen es 30em, tendrías un estilo de top: -30em; No te olvides de poner un índice z de 1 en el contenido.
   1. #contenido {
   3. posición: relativa;
   5. arriba: -30em;
   7. índice z: 1;
   9. ancho: 20em;
   11. altura: 30em;
   13. }
6. Luego agregue un índice z de -1 para los usuarios de IE 6, como lo hizo anteriormente:

Nuevamente, con el tamaño de fondo disfrutando de la amplia compatibilidad con el navegador que ahora tiene, este enfoque probablemente también sea innecesario y se presente como un producto de una era pasada. Si desea utilizar este enfoque, asegúrese de probar esto en tantos navegadores como sea posible. Y si su contenido cambia de tamaño, deberá cambiar el tamaño de su contenedor y la imagen de fondo, de lo contrario, obtendrá resultados extraños.