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

41 comentarios:

Jorge Ruiz: Señor JMiur:

Reciba mis saludos. Tengo una preguntita, en el CSS de lo que nos presenta en esta entrada algo que me llamo la atención fue z-index. Me podría decir de que se trata. Para que sirve o como se usa(?)

Gracias.
Unknown: JMiur, ya intentaste agregandole atributos CSS de fijacion?

display:scroll;
position:fixed;

a la imagen tal vez así pueda moverse y no ver el fondo blanco.
Anónimo: hola Miur, creo que ya te he escrito una vez. Bueno, yo creo que esto ocurre en todos los países, a todos los niveles. Cuando uno va recomendado parece que lo atendieran a uno más rápido. Voy a intentarlo de nuevo contigo.. o a Usted ? un comentador lo trata de Usted. Disculpe si lo he disgustado por ello. De veras le pido mis disculpas.
Estimado Senor Miur, vengo a recomendación de Lujo (Unblogdelujo.blogspot.com).
MI blog: http://herbstabend.blogspot.com - Qué ocurre con mi blog? --> muchas cositas malitas ocurren en mi blog, pero lo que en este momento me ocupa y me quita la tranquilidad es, que en los blogs de mis seguidoras aparezco como si no hubiera escrito desde Mayo 2009.
Le puedo dar un ejemplo, en el blog de mi amiga Zully: http://simplementemanola.blogspot.com ... En el borde derecho ella tiene los blogs que ella sigue, ahi aparece el mío. Ahi Usted podrá observar que mi blog herbstabend tiene fecha de publicación 3 meses.
En el blog de Mariela Teresa http://pequeosdetallesmanualidades.blogspot.com aparezco también (Auxilio) que desde hace 4 meses no escribo! (Auxiliooo!!!) .
La prueba se la copio aqui: "herbstabend ... Tarde de Otoño ... Conocimientos ... Wissen ... Saber ...
Día Internacional de la Familia
Hace 4 meses "

Auxilioooo!!!!!! :$
Qué hice falso? Qué debo hacer? Cómo eliminar ese problemita? Por qué estoy siendo castigada?
Creo que ya exagero con esta última pregunta de auxilio... Pero así me siento, impotente!
Una cosita le pido ... Que se dé un apuroncito en la ayuda ... jejeje Dentro de poco cumple mi blog rosadito un añito ...!

P.S.: disculpe mi español, me esmero en escribir correctamente y con el sentimiento de una hispanoamericana ;-)
JMiur: Jorge:
Cada elemento o sea, cada etiqueta se coloca en un orden, ese orden es el "indice". AL primera que escribes será 1 la segunda 2, etc. Cuando dos de esos elementos se superponen, uno está encima del otro. Con z-index, controlamos cual está sobre cual y lo podemos modificar. Suena confuso :D Fíajete en esta entrada donde hay algunos ejemplos onllne.

SäNTÿ:
No lo probé. Ahora me fijé y no veo como podría hacerse así que cualquier idea será bienvenida.
JMiur: Querida Rebeca:

No sé de dónde has sacado semejante idea de las recomendaciones pero, en todo caso, si te parece una práctica deleznable, y lo es, lo primero que yo haría es no emplearla. Es que me gusta ser fiel a mis convicciones.

Tampoco creo que el sarcasmo sea un buen método para relacionarse con gente pero bueno, eso es cosa de cada uno. Es que hay un problema con ese tipo de cosas, podemos meter la pata y reclamar algo que el otro ya ha hecho pero que somos tan ... tan ... que no nos hemos tomado el trabajo de verificarlo.

El comentario al que te refieres fue respondido en su momento, hace ya bastante tiempo, exactamente, 2 horas y 41 minutos después que dejaras la consulta así que primero, ve y leelo; luego, no sé si seguiremos hablando.
Unknown: Jmiur ;) se vén realmente feos :(
Juro por la santa biblia blogger que no intento hacer más cambios en el fondo :)
que tengas un día genial, utiliza abanicos que se viene fuerte la temperatura
Romer Riera: Saludos Jorge.
Cuando se tienen imagenes,o colores, en las diferentes secciones de la plantilla, digamos: OuterWrapper,Body, Main, etc. ¿Se pueden hacer estas imagenes o colores transparentes? ¿Se le pueden aplicar filtros como "alpha" o alguna clase de visibility u opacity?
Bonzu Pipinpadaloxicopolis III: ¿Será que en un futuro no muy lejano se pueda usar un imagen de fondo redimencionable sin tantos problemas?

En lo que eso llega usaré este método ;-).
JMiur: Graciela:
Estoy de acuerdo :D Todo lo que sea automático es limitado.

Romer Riera:
Sí, eso es posible usando propiedades CSS pero difieren con los navegadores así que hay poner dos o tres en cada una. Fijate en estas dos entradas con ejemplos concretos: 1 | 2

Bonzu:
No creo porque el concepto es erróneo, salvo que alguien invente un sistema de ampliación de tal calidad que "adivine" eso que no se ve en el original.
EM2.0: Hola, una pregunta, una imagen puesta como fondo en el main, en lugar que en el cuerpo de las entradas puede impedir o crear conflicto para que le des forma al titulo de las entradas?, es que llevo dos dias probando desde la plantilla en post h3, desde las mismas entradas, etc... y no consigo que me coja nada de nada, ni tan siquiera una misera letra en negrita, es como si algo lo bloqueara o cono si faltasen variables, y no se que hacer o probar.
JMiur: No, la imagen no afectará en nada. Es probable que el problema surja si quieres cambiar las porpiedades de la etiqueta H2 que es el titulo de las entradas porque estos títulos además, son un enlace así que conviene qiue los definas por separado de esta manera:

.post h2, .post h2 a {
...........
}

y ahí dentro colocas las propiedades que quieras cambiar.
EM2.0: Probé a poner posth2 antes de que me lo dijeras, no dio resultado, voy a probar como pones tú .post h2, .post h2 a {, y ya te contare, pero si ves que cuando vuelva estoy calva, es que no a chirulao, ya te contare, gracias por ayudarme.Te doy permiso para que me llames pesada.
Eulalia: Santy tiene razón. Si al código le añades fixed detrás de no-repeat, en las plantillas que no usen el % para definir las medidas, el fondo se queda quieto y la zona útil del blog se desliza por encima, con lo que si la imagen es lo suficientemente alta no se ve nunca el final de ella. Lo que no se es si al añadirle la propiedad de expandirse funcionará ese fixed.
Un abrazo.
EM2.0: Caballero, conservo mi melena, es usted (con perdón) "el puto amo", ha chirulao, he ido probando y cambiando hasta conseguir mas o menos el efecto deseado y voila funciono, muchas gracias quedo a sus pies (suponiendo que no le huelan).
EM2.0: Claro que ahora intento lo mismo con los títulos de la sidebar (no te rías) y si pongo sidebar h2 en sidebar content deja de funcionar las características dadas al titulo del post, pero si lo pongo detrás de post h2 no funcionan las de el titulo de la sidebar, extrañas plantilas estas que no son capaces de ponerse de acuerdo solitas.
JMiur: Eulalia:
En este caso no hay un background, es decir, la imagen es una etiqueta IMG que se "estira" hasta ocupar el 100% de la altura, pero, de la altura del monitor ya que no se puede acceder al dato de la altura total de la página, sólo de la parte visible.
En todo caso, podría usarse la posición para fijar la imagen, en lugar de poner position:absolute debería ponerse position:fixed;
#imagenfondo {
....................
position:fixed;
}
Claro que, como las resoluciones de pantalla tienen difernetes proporciones ancho:alto, el resultado es bastante impredecible.

Dña. Urraca:
Para la sidebar, la definción sería así, por ejemplo esta coloca los títulode color rojo:
.sidebar h2 {color:red}
Debe ser ubicada en cualquier parte pero siempre, después de la de h2 { .... }
EM2.0: Solo quiero cambiar la fuente para que sea igual que la fuente del titulo de las entradas, he probado con .sidebar h2 (font-family: Alba;, pero pasa lo que te dije después del posth2 no lo coge, y antes anula las características del titulo del post.
EM2.0: No lo entiendo después de dejarte el ultimo comentario acabo de volver a probarlo y ahora si lo ha cogido, pero poniéndolo delante del post h2, de verdad que a veces se me hace difícil de entender como funciona, en fin caso resuelto.
JMiur: En realidad, es lo mismo que esté antes o después de .post h2 {} pero si es importante que esté después de h2 {} porque las instrucciones se ejecutan en orden así que si una dice color rojo y otra dice color verde, vale la última. H2 se refiere a todos, en cambio .post h2 {} y .sidebar h2 {} sólo afectan a esos así que son independientes entre si.
Unknown: Verás JMiur, ya lo he comprovado y funciona aunque la imagen sea pequeña, pues independientemente de la resolución la imagen se adapta al ancho y a lo alto. Siendo lo anterior solo restaria que se moviera junto con el scrollbar para no ver el espacio en blanco, lo cual, se resuelve modificando los atributos:

#imagenfondo {
height: 100%;
left: 0;
display:scroll;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}

Listo, creo que eso es todo xD!!
Miguel A. Pérez: Es posible agregar este tipo de menú en la sidebar?? Me gustaria que mis categorias de la sidebar se pudieran desplegar y mostrar subcontenidos y me preguntaba si esto vale también para elementos contenidos en la sidebar. Y en ese caso como habría que aplicarlo. Gracias
JMiur: No sé a cual menú te refieres.
Hugo.V13: Gracias!! Si me ha servido ^^! Aunque para solucionar el problemita de hacer scroll solo le puse el position:fixed directamente a la imagen que utilizo... osea, delante del src='link...' con un style ^^! Y me funcionó bien =P! Jejeje...

Saludos!! ^^
Paramatma: JMiur buen dia:

Tengo el sigueinte blog http://cesarlasso.blogspot.com/ pero quiero cambiarle el fondo a esta imagen http://1.bp.blogspot.com/_A_BXOSXle0Y/TGnsC5NuZEI/AAAAAAAAAww/Rjk8dA-RajI/s1600/body-bg.png He probado varias cosas y no es posible, miro en Informacion de la Pagina de Firefox el fondo y cuando lo busco en el HTML no lo encuntro. Me podrias guiar en como hacerlo???

Mil gracias.
JMiur: Esa imagen es el fondo celeste de la paginación. Es el background de estas definiciones:

.showpageNum a { }
.showpageNum a:hover { }
.showpagePoint { }

http://1.bp.blogspot.com/_A_BXOSXle0Y/TGnsC5NuZEI/AAAAAAAAAww/Rjk8dA-RajI/s1600/body-bg.png
Paramatma: Entonces lo que hice fue colocar mi imagen que queria de fondo en el fondo de otra cosa como diria condorito PLOP!!!, Jmiur lo que quiero es cambiar ese color grisoso del fondo por una imagen pero no encuentro la manera de nuevo termino con mi frase ME AYUDAS??
JMiur: Claro. En realidad, no puedes ver la definición porque muchos de los estilos de esa plantilla, son cargados desde archivos externos alojados en http://www.elegantthemes.com/

En el caso de la imagen de fondo, se encuentra en el archivo style.css:
html {
background: transparent url(images/background.png) repeat scroll 0 0;
}

Sugiero que analices muy bien esa plantilla porque hay muchísimos archivos que están alojados en elegantthemes.com así que siempre estarás dependiendo que existan y sean accesibles; por supuesto, no podrás modificarlos.
JMiur: La imagen que envias es inaccesible.

Se pueden tener múltiples fondos pero sólo en ciertos navegadores.
JMiur: Supongo que deberá ir en el body:

body {
background-image: url(URL_imagen1), url(URL_imagen2);
background-position: left top, left bottom;
background-color: #C5D9F1;
background-repeat: repeat-x;
.......
}

Pero, como te dije, eso no se verá en todos los navegadores.
Admin: JM busqué por todo tu blog y no encuentro la respuesta, le puse una imagen de fondo a http://www.sonando-porbailar.com.ar y de donde saqué la imagen la tienen como fixed, y se ve fija obviamente y sin repetirse, pero a mi se me repite practicamente como si fuera un mosaico, probé con varios códigos que vi aquí y en otras entradas y no logro darle ese efecto.
O sea que se vea fija, de fondo y que cubra tooodo... alguna idea?

¿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

Vagabundia

Imágenes de fondo redimensionables

41 comentarios:

¿Quiere dejar un comentario?

entradas relacionadas

la puerta abierta

las etiquetas

Páginas