Me pregunto cuál es la mejor solución para que una imagen de fondo se ajuste a todas las pantallas, a todos los navegadores. También noté que la mayoría de las técnicas recortan la imagen un poco. Sé que hay muchas técnicas para hacer esto, pero quiero saber cuál es la mejor en su opinión. Gracias!css fondo de imagen de pantalla completa perfecta
Respuesta
Este post from CSS-tricks.com cubre diferentes técnicas para imágenes de fondo de pantalla completa e incluye un respaldo para versiones anteriores de IE (no he probado la solución de IE).
Cuando no tiene que preocuparse por el apoyo a los navegadores antiguos, por lo general utilizan el método de CSS3:
html {
background: url(http://lorempixum.com/1440/900/sports)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demasiado, lo sé, pero ¿hay una buena alternativa a esto que no cambie de tamaño con el navegador? Ojalá pudiera dar solo la imagen a una altura mínima –
Añadir esta dentro del cuerpo de la etiqueta:
<img src="img/beach.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg
- 1. Video de fondo a pantalla completa y manténgalo centrado
- 2. JWPlayer para pantalla completa Video de fondo
- 3. Imagen de pantalla completa de iPhone
- 4. Centrar una imagen de fondo, usando CSS
- 5. [Pantalla de bienvenida] ¿Cómo mostrar una imagen en pantalla completa?
- 6. css con imagen de fondo sin repetir la imagen
- 7. CSS Path Imagen de fondo Problemas
- 8. CSS: Imagen de fondo y relleno
- 9. css imagen de fondo ajuste a DIV
- 10. Ancho de pantalla completa área div
- 11. css imagen de fondo redimensionar ancho recortar altura
- 12. Imagen de fondo de CSS: ¿Cuál es el uso correcto?
- 13. Imagen de fondo de CSS URL que no se carga
- 14. ios: colorWithPatternImage, expandir la imagen de pantalla completa
- 15. Imagen de fondo de Django CSS usando STATIC_URL
- 16. imagen de la pantalla retina con css puro
- 17. Imagen de fondo de iOS 6
- 18. Widget de pantalla completa
- 19. Pantalla completa Iframe
- 20. Audio de fondo - Imagen en la pantalla de bloqueo
- 21. Imagen de fondo UIViewController
- 22. Establezca la imagen de escritorio de pantalla completa de OS X Lion programáticamente
- 23. iPad & iPhone: la imagen de fondo de la página completa muestra el enlace de corte/captura de pantalla incluido
- 24. Precargar imagen de fondo
- 25. ¿Cómo establecer la imagen como fondo de pantalla mediante programación?
- 26. Android - Cómo configurar la imagen del fondo de pantalla?
- 27. Android: cómo configurar la imagen del fondo de pantalla
- 28. GLPaint función Guardar (Save pantalla actual imagen de fondo)
- 29. cómo ajustar toda la imagen en la pantalla como fondo de pantalla
- 30. imagen de sprite CSS + fondo-repite una parte de ella
I no creo que realmente haya una solución para todos. Su solución dependerá en gran medida de cómo se vea su imagen y cómo se aplica. Por ejemplo, muchas imágenes de fondo dejan una gran brecha en el ancho de su área de contenido en el centro de la imagen. Mientras que otra imagen de fondo se muestra a través del área de contenido. Algunos repiten. Existen varias técnicas para imágenes de fondo pero difieren según el diseño. – Jrod
http://css-tricks.com/3458-perfect-full-page-background-image/ - Método jquery - probablemente la mejor solución. – easwee