¿Cuál es la mejor práctica para establecer una imagen de fondo centrada y 100% (para que ocupe toda la pantalla , pero aún conserva la relación de aspecto) en todos los navegadores?imagen centrada y 100% en todos los navegadores
Respuesta
Recogiendo una publicación anterior, ya que hay un nuevo método para hacerlo con un buen soporte de navegador.
Uso background-image
así:
background-size:cover;
background-position:center;
Esto no va a destruir las proporciones de la imagen, pero la escala de la mejor manera posible, no mostrar ninguna barras negras (o lo que sería en el fondo).
apoyo Browser es casi perfecto como se puede ver en Can I use it?. Opera Mini podría ser un problema, pero el navegador probablemente será reemplazado por Vivaldi pronto.
En conclusión, creo que este es definitivamente el camino a seguir, ya que es, con mucho, la solución más limpia y confiable y muy fácil de editar con JS.
Gracias por actualizar un hilo viejo. Esta es la forma en que lo hago hoy también. – jamietelin
No sé cómo lograr esto configurándolo como una imagen de fondo. Sin embargo, usted podría tener una imagen que se coloca absolutamente
<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>
¿Qué es 'display: table;' for? – ANeves
para alinear verticalmente al trabajo. también se puede mostrar: table-cell – Kasturi
No creo que lo necesite para alinear verticalmente al trabajo, se supone que vertical-align funciona en cualquier elemento en línea: http://www.htmldog.com/reference/ cssproperties/vertical-align/ – ANeves
Usted podría utilizar CSS3 background-size
property, pero no estoy seguro de lo bien que se apoya. Creo que la mayoría de ellos lo hacen pero con prefijo:
-o-background-size
-webkit-background-size
-khtml-background-size
La mejor práctica es no para hacer lo que quiere hacer.
Al especificar el 100%, va a estirar (distorsionar) la imagen.
La mejor manera de tener un fondo simple, centrado es así:
body {
background-image:url(Images/MyBG.png);
background-position:center top;
background-repeat:no-repeat
}
EDIT:
Ahora usted puede dirigirse a diferentes resoluciones y utilizar una imagen de fondo diferente, dependiendo del tamaño especificando una hoja de estilo dependiente de la resolución. Puede usar hojas de estilo separadas solo para definir un elemento de fondo con diferentes archivos en cada una.
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
Ver: http://css-tricks.com/resolution-specific-stylesheets/
o la W3C CSS media query spec.
El problema con esta solución es que necesito hacer muchas, muchas imágenes con diferente resolución. – jamietelin
Este es un excelente post sobre dos métodos para lograr este look:
Hice una versión modificada de la Técnica # 2, funciona como una okey, verifique mi propia respuesta a la pregunta. – jamietelin
mejor solución que he logrado hacer hasta ahora es el siguiente;
//CSS
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
}
</style>
//HTML
<body>
<div id="bg">
<img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
//Rest of content
</div>
</body>
¿Podría ser esta la mejor manera? ¿Alguien ve algún problema al hacerlo de esta manera?
¡Gracias por su tiempo!
- 1. ¿Imagen estirada y centrada?
- 2. Ancho automático de imagen en CSS para todos los navegadores?
- 3. Mostrar imagen TIFF en todos los navegadores web
- 4. Object.watch() para todos los navegadores?
- 5. window.href para todos los navegadores
- 6. cambiar el tamaño y recortar la imagen centrada
- 7. ¿Funciona @ font-face en todos los navegadores?
- 8. ¿Los comentarios son 100% seguros en todos los entornos principales?
- 9. Highcharts jQuery representación problema - todos los navegadores
- 10. javascript reemplazar selección todos los navegadores
- 11. Imagen PNG con representaciones de transparencia con fondo blanco en todos los navegadores?
- 12. HTML/CSS: un elemento, 1 píxel de alto, 100% de ancho, 0 imágenes, un solo color, todos los navegadores
- 13. ¿Error de Mouseup en todos los navegadores excepto en Firefox?
- 14. Copiar al portapapeles para todos los navegadores usando javascript
- 15. Cómo encontrar todos los navegadores instalados en una máquina
- 16. ¿Cómo puedo usar HTML5 en todos los navegadores, incluido IE7,8?
- 17. ¿El atributo "patrón" html5 funciona en todos los navegadores?
- 18. Cancelar solicitud única imagen en los navegadores HTML5
- 19. ¿Cómo se usa la etiqueta <col> correctamente y es compatible con todos los navegadores?
- 20. Con múltiples imágenes de fondo definidas en una clase de CSS; ¿Los navegadores los descargan todos?
- 21. Evento de la galería a "cuando la imagen está centrada"
- 22. Android 2.2 Haga clic y arrastre la imagen centrada en contacto
- 23. Incrustar Windows Media Player para todos los navegadores
- 24. Selección de un DOCTYPE para HTML 5 + todos los navegadores
- 25. Error de respuesta Ajax y JSON en Internet Explorer (funciona en todos los demás navegadores)
- 26. Enviando mensajes a todos los navegadores con socket io
- 27. registro o log todos los navegadores DOM/jQuery Evento (s)
- 28. ¿El HTML 5 es compatible con todos los navegadores principales?
- 29. ¿Todos los navegadores son compatibles con $ _SERVER de PHP ['HTTP_X_REQUESTED_WITH']?
- 30. ¿Importa la imagen dpi a los navegadores web?
¿Qué es "todos los navegadores"? ¿Incluye IE6? (Por su propio bien, mejor no). – ANeves
No, pero todos los navegadores están actualizados :) Por lo tanto, IE8, Firefox 3, Safari 4 y así sucesivamente ... y con todos me refiero a todos los principales navegadores, no Camino, Miro y pronto. – jamietelin