Cómo estirar una imagen de fondo para que se ajuste a una página web
Dale interés visual a tu sitio web con gráficos de fondo
Qué saber
- Método preferido: use la propiedad CSS3 para tamaño de fondo y configúralo en cubrir .
- Método alternativo: use la propiedad CSS3 para tamaño de fondo ajustado a 100% y posición de fondo ajustado a centro.
Este artículo explica dos formas de estirar una imagen de fondo para que se ajuste a una página web usando CSS3.
La forma moderna
Las imágenes son una parte importante del atractivo diseños de sitios web . Agregan interés visual a una página y lo ayudan a lograr el diseño que está buscando. Cuando trabaja con imágenes de fondo, es posible que desee que una imagen se estire para ajustarse a la página a pesar de la amplia gama de dispositivos y tamaños de pantalla .
La mejor manera de estirar una imagen para que se ajuste al fondo de un elemento es usar el CSS3 propiedad, por tamaño de fondo , y lo igualamos a cubrir .
|_+_|
Usando el ejemplo de arriba con el tamaño de fondo ajustado a 100% en cambio, puede ver que el CSS se ve casi igual.
El resultado en un navegador de pantalla completa o uno con dimensiones similares a la imagen es casi idéntico. Sin embargo, con una pantalla más estrecha, los defectos comienzan a aparecer.
Claramente, no es lo ideal, pero funcionará como una alternativa.
De acuerdo a caniuse.com , esta propiedad funciona en IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ y en todos los principales navegadores móviles. Esto lo cubre para todos los navegadores modernos disponibles en la actualidad, lo que significa que debe usar esta propiedad sin temor a que no funcione en la pantalla de alguien.
Entre estos dos métodos, no debería tener ninguna dificultad para admitir casi todos los navegadores. Como tamaño de fondo: portada gana aún más aceptación entre los navegadores, incluso este respaldo se volverá innecesario. Claramente, CSS3 y prácticas de diseño más receptivas han simplificado y optimizado el uso de imágenes como fondos adaptables dentro de elementos HTML.