¿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
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!
¿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