Más sobre imágenes de fondo redimensionables

JMiur [E]

La propiedad background-size nos permite establecer las dimensiones de la imagen de fondo para definir la relación ancho/alto que debe mantenerse, sin que importe el tamaño del contenedor.

leer artículo actualizado

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?
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
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/
JMiur: Muy bien; será cuestión de ver qué cosas nuevas tiene el sistema ya que lo probé hace mucho mucho tiempo :-)
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
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.
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?=
JMiur: En términos generales, si. Fíajte en esta pagina de Mozilla para ver los detalles.
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/
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;
}
Cordobess@: uuuf gracias he usado el ultimo metodo y me ha solucionado mi problema!

¿Quiere dejar un comentario?

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

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 ...

Suscribirse a los comentarios

JMiur

Buenos Aires
Argentina

Biografía apócrifa

Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.

El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.

Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.

Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?

Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.

Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).

Resumiendo.

Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.

Esto es to-to-todo amigos.

el retrovisor