Cómo agregar imágenes de fondo receptivas a un sitio web
Aquí se explica cómo agregar imágenes de diseño receptivo usando CSS
Imágenes de Hannah Mentz / Getty
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 práctica recomendada 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 imágenes en línea receptivas a un sitio (las imágenes en línea son los gráficos que están codificados como parte del marcado HTML), hacer lo siguiente Lo mismo con las imágenes de fondo (que se diseñan en la página usando las propiedades de fondo de CSS) ha representado durante mucho tiempo un desafío importante para muchos diseñadores web y desarrolladores front-end. 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 esta propiedad. Para ello, utilizaremos la siguiente combinación de propiedad y valor:
|_+_|La propiedad de la palabra clave cover le dice al navegador que escale la imagen para que se ajuste a la ventana, independientemente de 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 que se cubra toda la superficie de la ventana. Esto significa que no tendrá espacios 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 (superior, inferior, izquierdo o derecho) pueden quedar recortados en las imágenes, según los valores que utilice para la propiedad de posición de fondo. Si orienta el fondo hacia la 'superior izquierda', cualquier exceso en la imagen se desprenderá 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 usar 'tamaño de fondo: portada;'
Al crear su imagen de fondo, es una buena idea crear una imagen que sea bastante grande. Mientras que los navegadores pueden hacer una imagen 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á, se volverá borrosa y pixelada. La desventaja de esto es que su página sufre un impacto en el rendimiento cuando muestra imágenes gigantes en 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 término medio entre un tamaño y una calidad de imagen lo suficientemente grandes y un tamaño de archivo razonable para las velocidades de descarga.
Una de las formas comunes de usar imágenes de fondo escalables es cuando desea que esa 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.
Cargue su imagen en su servidor web y agréguela a su CSS como imagen de fondo:
|_+_|Agregue primero el CSS prefijado del navegador:
|_+_|
Luego agregue la propiedad CSS:
|_+_|Uso de diferentes imágenes que se adaptan a diferentes dispositivos
Si bien el diseño receptivo para una experiencia de computadora de escritorio o portátil es importante, la variedad de dispositivos que pueden acceder a la web ha crecido significativamente, y eso conlleva una mayor variedad de tamaños de pantalla.
Como se mencionó anteriormente, cargar una imagen de fondo receptiva muy grande en un teléfono inteligente, por ejemplo, no es un diseño eficiente o consciente del ancho de banda.
Aprende cómo puedes usar preguntas de los medios para mostrar 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 los dispositivos móviles.