Mire los sitios web populares de hoy y un tratamiento de diseño que seguramente verá son imágenes de fondo grandes que abarcan la pantalla. Uno de los desafíos al agregar estas imágenes proviene de la mejor práctica de que los sitios web deben responder a diferentes dispositivos y tamaños de pantalla, un enfoque conocido como diseño web sensible.
Dado que el diseño de su sitio web cambia y se escala con diferentes tamaños de pantalla, también lo deben hacer estas imágenes de fondo escalar su tamaño en consecuencia. De hecho, estas "imágenes fluidas" son una de las piezas clave de los sitios web receptivos (junto con una cuadrícula fluida y consultas de medios). Esas tres piezas han sido un elemento básico del diseño web sensible desde el principio, pero si bien siempre ha sido bastante fácil agregar imágenes en línea con capacidad de respuesta a un sitio (las imágenes en línea son los gráficos que están codificados como parte del formato HTML), Lo mismo con las imágenes de fondo (que están estilizadas en la página con las propiedades de fondo de CSS) siempre ha sido un desafío importante para muchos diseñadores web y desarrolladores front-end. Afortunadamente, la adición de la propiedad "tamaño de fondo" en CSS ha hecho esto posible.
En un artículo separado, cubrí cómo usar la propiedad CSS3 tamaño de fondo para estirar las imágenes para que quepan en una ventana, pero hay una forma aún mejor y más útil de implementar para esta propiedad. Para hacer esto, usaremos la siguiente combinación de propiedad y valor:
tamaño de fondo: cubierta;
los cubrir la propiedad de palabra clave le dice al navegador que escale la imagen para que se ajuste a la ventana, sin importar cuán grande o pequeña sea esa ventana. La imagen se escala para cubrir toda la pantalla, pero las proporciones originales y la relación de aspecto se mantienen intactas, lo que evita que la imagen se distorsione. La imagen se coloca en la ventana lo más grande posible para cubrir toda la superficie de la ventana. Esto significa que no tendrá ningún espacio en blanco en su página ni distorsión en la imagen, pero también significa que parte de la imagen puede recortarse según la relación de aspecto de la pantalla y la imagen en cuestión. Por ejemplo, los bordes de una imagen (arriba, abajo, izquierda o derecha) pueden recortarse en las imágenes, según los valores que utilice para la propiedad de posición de fondo. Si orienta el fondo a "arriba a la izquierda", cualquier exceso en la imagen saldrá de los lados inferior y derecho. Si centras la imagen de fondo, el exceso se desprenderá de todos los lados, pero como ese exceso se extiende, el impacto en cualquier lado será de menor servicio.
Cómo utilizar tamaño de fondo: cubierta;
Al crear su imagen de fondo, es una buena idea crear una imagen que sea bastante grande. Si bien los navegadores pueden hacer que una imagen sea más pequeña sin un impacto notable en la calidad visual, cuando un navegador amplía una imagen a un tamaño mayor que sus dimensiones originales, la calidad visual se degradará, volviéndose borrosa y pixelada. La desventaja de esto es que su página recibe un impacto en el rendimiento cuando entrega imágenes gigantes a todas las pantallas. Cuando haga esto, asegúrese de preparar adecuadamente esas imágenes para la velocidad de descarga y la entrega web. Al final, debe encontrar el medio feliz entre un tamaño y calidad de imagen lo suficientemente grande y un tamaño de archivo razonable para las velocidades de descarga.
Una de las formas comunes de usar la escala de imágenes de fondo es cuando desea que la imagen ocupe el fondo completo de una página, ya sea que la página sea ancha y se vea en una computadora de escritorio o mucho más pequeña y se envíe a una computadora de mano, móvil dispositivos
Suba su imagen a su proveedor de alojamiento web y agréguela a su CSS como imagen de fondo:
imagen de fondo: url (fireworks-over-wdw.jpg);repetición de fondo: no repetición;posición de fondo: centro centro;adjunto de fondo: fijo;
Agregue el navegador con el prefijo CSS primero:
-webkit-background-size: cubierta;-moz-background-size: cubierta;-o-fondo-tamaño: cubierta;
Luego agrega la propiedad CSS:
tamaño de fondo: cubierta;
Usando diferentes imágenes que se adaptan a dispositivos variables
Si bien el diseño sensible para una computadora de escritorio o una computadora portátil es importante, la variedad de dispositivos que pueden acceder a la Web ha crecido significativamente, y una gran variedad de tamaños de pantalla viene con eso.
Como se mencionó anteriormente, la carga de una imagen de fondo muy grande en un teléfono inteligente, por ejemplo, no es un diseño eficiente o consciente del ancho de banda.
Aprenda cómo puede usar las consultas de medios para mostrar imágenes que serán apropiadas para los dispositivos en los que se mostrarán, y mejore aún más la compatibilidad de su sitio web con los dispositivos móviles.
