Mire los sitios web populares hoy en día y un tratamiento de diseño que seguramente verá son imágenes de fondo grandes que abarcan la pantalla. Uno de los desafíos de agregar estas imágenes proviene de la mejor práctica de que los sitios web deben responder a diferentes tamaños de pantalla y dispositivos, un enfoque conocido como diseño web adaptable.
Una imagen para muchas pantallas
Dado que el diseño de su sitio web cambia y se escala con diferentes tamaños de pantalla, estas imágenes de fondo también deben 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 receptivo desde el principio, pero si bien siempre ha sido bastante fácil agregar contenido receptivo imágenes en línea a un sitio (las imágenes en línea son los gráficos que están codificados como parte del marcado HTML), haciendo lo mismo con las imágenes de fondo (que tienen un estilo en la página utilizando propiedades de fondo CSS) ha representado durante mucho tiempo un desafío significativo para muchos diseñadores web y aplicaciones de interfaz desarrolladores. Afortunadamente, la adición de la propiedad "background-size" en CSS lo ha hecho posible.
En un artículo separado, cubrimos cómo usar el Tamaño de fondo de la propiedad CSS3 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;
La propiedad de la palabra clave cover 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 y la relación de aspecto originales 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 ninguna distorsión en la imagen, pero también significa que parte de la imagen puede recortarse dependiendo de la relación de aspecto de la pantalla y la imagen en pregunta. Por ejemplo, los bordes de una imagen (superior, inferior, izquierda o derecha) pueden cortarse en las imágenes, según los valores que utilice para la propiedad background-position. Si orienta el fondo hacia "arriba a la izquierda", cualquier exceso en la imagen saldrá de los lados inferior y derecho. Si centra la imagen de fondo, el exceso se desprenderá de todos los lados, pero como ese exceso se extiende, el impacto en cualquier lado será menor.
Cómo utilizar 'background-size: cover;'
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 escala un imagen a un tamaño mayor que sus dimensiones originales, la calidad visual se degradará, volviéndose borrosa y pixelado. La desventaja de esto es que su página sufre un impacto en el rendimiento cuando entrega imágenes gigantes a todas las pantallas. Cuando haga esto, asegúrese de preparar 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 grandes y un tamaño de archivo razonable para velocidades de descarga.
Una de las formas habituales de utilizar la escala de imágenes de fondo es cuando desea que la imagen ocupe todo el fondo de una página. si esa página es ancha y se ve en una computadora de escritorio o mucho más pequeña y se envía a una computadora de mano, dispositivo móvil dispositivos.
Sube tu imagen a tu servidor web y agrégala a tu CSS como imagen de fondo:
imagen de fondo: url (fuegos artificiales sobre wdw.jpg);
repetición de fondo: no repetición;
posición de fondo: centro centro;
archivo adjunto de fondo: fijo;
Agregue primero el CSS con el prefijo del navegador:
-webkit-background-size: portada;
-moz-background-size: portada;
-o-background-size: cover;
Luego agregue la propiedad CSS:
tamaño de fondo: cubierta;
Uso de diferentes imágenes que se adaptan a distintos dispositivos
Si bien el diseño receptivo para una experiencia de escritorio o portátil es importante, la variedad de dispositivos que pueden acceder a la Web ha crecido de manera significativa, y una mayor variedad de tamaños de pantalla viene con que.
Como se mencionó anteriormente, cargar una imagen de fondo con capacidad de respuesta 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 preguntas de los medios para ofrecer imágenes que sean apropiadas para los dispositivos en los que se mostrarán y mejorar aún más la compatibilidad de su sitio web con dispositivos móviles.