Estire y escale una imagen CSS en segundo plano, solo con CSS
Quiero que mi imagen de fondo se estire y escale según el tamaño de la ventana gráfica del navegador.
He visto algunas preguntas sobre Stack Overflow que funcionan, como Estirar y escalar el fondo CSS, por ejemplo. Funciona bien, pero quiero colocar la imagen usando background, no con una imgetiqueta.
En ese imgse coloca una etiqueta, y luego con CSS le hacemos un homenaje a la imgetiqueta.
width:100%; height:100%;
Funciona, pero esa pregunta es un poco antigua y afirma que en CSS 3 cambiar el tamaño de una imagen de fondo funcionará bastante bien. Probé este ejemplo el primero , pero no funcionó para mí.
¿Existe un buen método para hacerlo con la background-imagedeclaración?
CSS3 tiene un pequeño atributo llamado background-size:cover.
Esto escala la imagen para que el área del fondo quede completamente cubierta por la imagen de fondo manteniendo la relación de aspecto. Se cubrirá toda el área. Sin embargo, es posible que parte de la imagen no sea visible si el ancho/alto de la imagen redimensionada es demasiado grande.
Podrías usar la propiedad CSS3 para hacerlo bastante bien. Cambia el tamaño según la proporción para que no haya distorsión de la imagen (aunque mejora las imágenes pequeñas). Solo tenga en cuenta que aún no está implementado en todos los navegadores.
background-size: 100%;
