JMiur [E]

Hace ya tiempo, mostraba en una entrada, la forma de poner imágenes de fondo redimensionables en el blog. En un artículo de CSS-Tricks vuelven sobre el tema y muestran algunos métodos así que acá van los ejemplos.

La idea es tener una imagen de fondo cualquiera y que esta imagen se redimensione automáticamente para que se vea bien con cualquier resolución de pantalla o incluso, que se adapte si se modifica el tamaño de la ventana del navegador.

Voy a usar una imagen "grande" de 1024x640 pero, con las variantes del caso, podríamos usar cualquier otra; claro que, si es muy pequeña, al redimensionarse perderá cierta calidad. Hay que tener muy en cuenta ese detalle porque en realidad, este es un truco de uso relativo.

La primera alternativa es similar a la que se mostraba en aquella vieja entrada y funcionará en todos los navegadores. Para usarla, debemos agregar estas reglas de estilo:
img.fullfondo {
  min-height: 100%;
  min-width: 1024px;
  height: auto;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 1024px) {
   /* esto lo usamos para establecer los tamaños máximos y mínimo de esta imagen */
  img.fullfondo {
    left: 50%;
    margin-left: -512px;   /* el valor del margen es la mitad del ancho de la imagen */
  }
}
Y ahora, deberíamos colocar la imagen a utilizar, justo después de <body>:
<img class='fullfondo' src='URL_imagen' />
El resultado es el que puede verse en esta entrada, aplicado a un blog auxiliar.

El segundo método es algo similar pero, la imagen la colocaremos en un DIV; las reglas de estilo serían estas:
#fullfondo {
  height: 200%;
  left: -50%; 
  position: fixed; 
  top: -50%; 
  width: 200%; 
}
#fullfondo img {
  bottom: 0; 
  left: 0; 
  margin: auto; 
  min-height: 50%;
  min-width: 50%;
  position: absolute; 
  right: 0; 
  top: 0; 
}
Y el DIV lo vamos a colocar al fnal de nuestro sitio, justo antes de </body>:
<div id="fullfondo">
  <img src="URL_imagen" />
</div>
Esto, funcionará en casi todos los navegadores excepto en Opera y en versiones de IE inferiores a la 8. El resultado es el que puede verse en esta otra entrada.

Por último, el más interesante es el que utiliza propiedades de CSS3 así que no funcionará en IE a menos que ya se esté usando la versión 9. Lo interesante de este método es que la redimensión es muy fluida.

El CSS es muy corto:
html {
  background: url(URL_imagen) no-repeat center center fixed;
  -moz-background-size: cover;  /* version Mozilla */
  -webkit-background-size: cover; /* version Chrome y Safari */
  -o-background-size: cover; /* version Opera */
  background-size: cover; /* version w3org */
}
El resultado es el que puede verse en esta entrada y no requiere nada más ya que hace uso de una propiedad nueva llamada background-size que nos permite definir justamente eso, el tamaño de las imágenes de fondo, cosa que hasta ahora, el CSS no lo permitía.

Es muy simple de utilizar aunque debemos agregar varias propiedades ya que los navegadores aún utilizan sus propias versiones:
background-size: valor;
donde el valor puede ser auto (es el valor por defecto), contain, cover o porcentajes (ancho y alto):
background-size: 50% 100%;

11 comentarios:

Gem@  

Con CSS3 sería la mejor opción pero Explorer9 no creo que sea tan usado como el 8, la del segundo método la encuentro más versátil.
Digo una tontería pero si lo añadimos de las dos formas ¿se visualiza según el navegador que se está usando?

Responder
JMiur  

Para IE9 falta bastante; aún no ha salido una versión final y además, requiere uilizar Vista o Windows 7 así que para muchos muchos muchos, será algo a probar de acá a un par de años :D

Responder
Alberto Rascht  

Buenas noches Jorge. Excelente artículo el que has posteado. Tal como te había escrito hace algunos días por el mail, el código universal de Disqus fue un verdadero complique para aplicarlo. No obstante, a raíz de tu post del 2008 sobre Intense Debate encontré que es más fácil acoplarlo a una página en html que cualquier otro sistema de comentario. Lo mejor es que ahora permite la integración con diversas redes sociales así como la traducción a múltiples idiomas. Por si hay alguien en misma situación, dejo el enlace. Muchas gracias por tu ayuda, Jorge.
http://intensedebate.com/

Responder
JMiur  

Muy bien; será cuestión de ver qué cosas nuevas tiene el sistema ya que lo probé hace mucho mucho tiempo :-)

Responder
Rokuta  

buenos dias/tardes/noches JMiur te escribo puesto que quiero plicar esto en mi fondo para empezar a utilizar fondos customizados. El tema es que no estoy seguro de como aplicarlo puesto que quiero que se vea relativamente bien en monitores widescreen.

Queria utilizar el CSS3 de la ultima opcion pero no estoy seguro donde colocarlo y si tengo que hacer alguna modificacion a la plantilla, puesto que en mi plantilla actual modifico el fondo con este codigo

}
body {
background: #111 url(http://i607.photobucket.com/albums/tt152/HikkiRoom/fondoprueba.jpg);
width: 980px;
color: #333;
margin: 0 auto 0;
padding: 0;
font: 12px Arial, Tahoma, Verdana;

mi web es http://www.hikkikomoriroom.com.ar

Responder
JMiur  

Con ese tipo de fondo no hay necesidad de nada de esto ya que se trata de un mosaico as´ique se vera bien siempre. Si vas a a cambiar el fondo por alguna imagen estática entonces si, simplemente debes agregar el CSS en tu plantilla, y nada más, en la parte de <b:skin> </b:skin> copias y pegas:

html {
.........
}

y allí cambias la URL por la de la imagen a utilizar.

Responder
Rokuta  

muchas gracias..la ultima cosa, con el valor "cover" la imagen se va a poner automaticamente del tamaño del monitor que se este usando?=

Responder
JMiur  

En términos generales, si. Fíajte en esta pagina de Mozilla para ver los detalles.

Responder
QSP Pasto  

Hola... primero muchas gracias por el post, estaba buscando sobre este tema hace mucho tiempo y no hayaba nada...y ahora que lo encuentro tengo un pequeño problema...te comento...lo que pasa es que cuando ingreso el codigo del fondo, (he usado el primero y el segundo codigo), me sucede algo curioso, el fondo si se redimensiona y se ajusta a la resolucion, pero se me pone el fondo encima de todo lo demas, no puedo ver ni mis widgets ni mis entradas ni nada, solo se mira el slider que tengo, y lo demas queda tapado por el fondo...a que se debe esto??? muchas gracias... mi blog es http://qsppasto.blogspot.com/

Responder
JMiur  

Tendría que ver el ejemplo pero, así en general, podrías probar agregandole la propiedad z-index, de este modo:

#fullfondo {
.......
z-index:-1;
}

Responder
Cordobess@  

uuuf gracias he usado el ultimo metodo y me ha solucionado mi problema!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR