Una cuestión muy importante en CSS, sobre todo en tiempos de mobile-first, es poder insertar una imagen responsive, capaz de verse bien en cualquier dispositivo, y esto adquiere mayor importancia cuando son imágenes de fondo.
Para hacerlo de modo exitoso es necesaria la propiedad background-size de CSS, la cual asimila el valor cover, que es el encargado de decir escale el alto y ancho de la imagen de forma automática y proporcional de acuerdo a la ventana de visualización o viewport de que se trate.
Por supuesto que varia según el tamaño de la pantalla, si para pantallas grandes tipo PC, o televisiones, una imagen con un tamaño de 5500x3600px es lo más adecuado, sin embargo no es lo recomendable para dispositivos más pequeños, como móviles, por tanto la opción de usar dos imágenes según el tamaño del display es útil y fácil de conseguir.
El uso de una imagen para una para dispositivos móviles y otra para equipos de más alta resolución, es una practica que ayuda mucho, teniendo en cuenta que queremos evitar que la imagen se pixele cuando se agrande, para cubrir el tamaño de la ventana del navegador, de lo que se trata es de hallar el tamaño adecuado, según nuestras necesidades
Para escribir la propiedad en el css, recordando que css es una hoja de cascada, por tanto las ordenes llevan un orden dado, nuestro código debería ser aproximadamente este:
// indicamos la ubicación de la imagen background-image: url(images/background-picture.jpg); //centramos la imagen vertical y horizontalmente */ background-position: center center; //evitamos que el navegador repita la imagen para llenar el espacio */ background-repeat: no-repeat; //dejamos la imagen fija de modo que no cambie si cambia la ventana del navegador, además, rescalandose background-attachment: fixed; // llamamos a la propiedad cover para indicar que cubrirá todo el ancho background-size: cover; //garantizamos que si hay un error al cargar o demora se muestre un color mientras tanto background-color: #66999;
este código puedes escribirlo o verlo escrito también en este formato
background: #66999 url(background-photo.jpg) center center cover no-repeat fixed;
Y listo, esto es todo.
Espero modestamente que este artículo, sirva de ayuda a alguien.
Gracias.
Subir montañas hermana hombres……