JMiur [E]

Cuando se coloca una imagen de fondo en el blog, son muchos los que se sorprenden al ver que no es lo suficentemente grande para abarcar todo el espacio disponible de la pantalla.

Por lo general, usamos la etiqueta body para colocar ese fondo y hay tres definiciones básicas

background: #COLOR url(URL_IMAGEN) no-repeat 50% top;
si la imagen es única (no se repite) y la centramos horizontalmente

background: #COLOR url(URL_IMAGEN) repeat-y left top;
si la imagen es un mosaico que se repite hacia abajo

background: #COLOR url(URL_IMAGEN) repeat left top;
si la imagen es un mosaico que se repite en todas direcciones

Cuando usamos background con la palabra no-repeat, salvo que usemos una imagen de un tamaño casi infinito, esta, jamás cubrirá toda la pantalla porque las resoluciones de los monitores varían. Por eso es que se la propeidad tiene la opción #COLOR donde le decimos al navegador que, el resto de la ventana, todo eso que la imagen de fondo no alcance a cubrir, debe ser rellenado con un color determinado.

Esto es así porque en principio, esa imagen no puede ser redimensionada para que se acomode al total de la pantalla ... aunque, en realidad, esto no es cierto ya que hay métodos para hacerlo.

En CSS Tricks hay varias alternativas; algunas, implican el uso de JavaScript, otras no.

De todos ellos, hay uno que me pareció el más sencillo de implementar porque requiere hacer pocas modificaciones en una plantilla normal y parece funcionar bien tanto en Internet Explorer como en Firefox.

Para implementarlo sólo se requiere definir algo así dentro del CSS:
html, body {
background-color: #COLOR;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}

#outer-wrapper {
.......
background-color: #COLOR;
position: relative;
z-index: 2;
}

#imagenfondo {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
Y colocar lo siguiente, justo después de <body>:
<div>
<img id="imagenfondo" src="URL_IMAGEN"/>
</div>
  • En este ejemplo, la imagen de fondo tiene 900x675
  • En este ejemplo, la imagen de fondo tiene 800x600
  • En este ejemplo, la imagen de fondo tiene 500x450
En todos los casos, la imagen de fondo se redimensiona para ocupar el 100% de la ventana del monitor pero con dos inconvenientes. Si la página a mostrar tiene un scroll (es más alta que la pantalla) al ir hacia a abajo, la imagen no se redimensionará así que el fondo quedará en blanco o con el color definido en el body (ver ejemplo).

El segundo punto en contra es más subjetivo: no hay ninguna imagen que pueda adaptarse a cualquier tamaño. Aún cuando se pudieran ampliar sin deformarse, perderán definición y por lo tanto, el resultado será bastante mediocre.

44 comentarios:

Jorge  

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.

Responder
SäNTÿ  

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.

Responder
Rebecca Rosenbaum  

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 ;-)

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

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

Responder
Graciela  

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

Responder
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?

Responder
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 ;-).

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

Responder
Dña. Urraca  

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.

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

Responder
Dña. Urraca  

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.

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

Responder
Dña. Urraca  

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

Responder
Dña. Urraca  

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.

Responder
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 { .... }

Responder
Dña. Urraca  

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.

Responder
Dña. Urraca  

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.

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

Responder
SäNTÿ  

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

Responder
Miguel Ángel  

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

Responder
JMiur  

No sé a cual menú te refieres.

Responder
Balthazar!  

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

Responder
GOCASE  

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.

Responder
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

Responder
GOCASE  

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

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

Responder
ANDRES ARMAS  

Hola Jmiur, Gracias por ayudarnos, esta oportunidad te hago la siguiente cobsulta, puedo tener 2 imagenes de fondo y un color de transición al medio al mismo tiempo en un blog...?, te mando el link
http://s3.subirimagenes.com:81/otros/6350673aimagen.jpg
para que me comprendas mejor, espero tu respuesta, saludos.

Responder
JMiur  

La imagen que envias es inaccesible.

Se pueden tener múltiples fondos pero sólo en ciertos navegadores.

Responder
ANDRES  

Hola Jmiur, Ya logré colocar la imagen superior de fondo + el color intermedio, por que la plantilla me lo permitía, solamente cambie la url y el color, me falta el codigo para ponerle la imagen inferior, podrías ayudarme con el codigo por favor, ya intente varias formas y no logré el resultado, gracias de antemano por tu respuesta.


Esta es la forma que necesito que quede, tengo la imagen superior, lo que ves en la siguiente imagen lo hice en Photoshop.

http://s3.subirimagenes.com:81/otros/6350673aimagen.jpg

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

Responder
ANDRES  

JMiur, gracias por la pronta respuesta, creo que lo dejo como está, es el segundo blog y espero completarlo pronto con ayuda de tu pagina, saludos.

Responder
k_nelita  

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?

JMiur  

Si es la que está en el body, debería ser:

background: url(http://3.bp.blogspot.com/-2PUCYVniG2o/T7WiirFhHGI/AAAAAAAALNQ/xitqEmDezLM/s1600/fnuevo.png) no-repeat fixed 50% 0 #797E84;

aunque tiene dos problemas; el color de fondo alterno (797E84) es gris y la imagen es pequeña para cubrir pantallas con resoluciones altas.

La única forma en que una imagen de fondo, pueda cubrir la pantalla del navegador por completo, sin importar la resolución del monitor es agregarle esta propeidad:

background-size: cover;

que no funcionará en versiones viejas de Internet Explorer pero, algo es algo.

k_nelita  

Ahí quedó creo que perfecto, lo miré en Chrome y FireFox y con una resolución de no se cuanto pero es un monitor de 18 pulgadas y se ve bien :-) Vos como lo ves?

Mil gracias!

k_nelita  

También podría cambiar el color de fondo por uno mas parecido al de la imagen no? Un lila o algo así...

JMiur  

Sí, me parece que se ve mejor pero ahí ya es cosa de gustos personales :-)

En cuanto al color, lo razonable es que sea similar al estilo de la imagen.

k_nelita  

Jaja no me refería a gustos personales que ya se que no te metés en eso ;-) sino a como la veías en tu monitor, si se ve la imagen entera y eso... Ahora voy a cambiar el color...

Otra pregunta que no tiene que ver con esto, pero no sabrás porqué desde ayer no veo el favicón con Chrome? Es como que lo quiere cargar y se ve un instante mientras está cargando la página pero después se queda el de Blogger :S
Con FireFox si sale... Me refiero al mismo blog...

JMiur  

Se verá ampliada en cualquier navegador moderno, eso no es problema.

El favicon lo veo perfectamente en Chrome.

k_nelita  

Gracias JM, me preocupa el favicón, sigo sin verlo en varios blogs de Blogger, blogspot o dominio propio es igual, pero solo en algunos en otros los veo... :S En tu blog lo veo, pero hay otros que no...
Será mi Chrome? Que puedo hacer? En FireFox los veo bien...

JMiur  

Eso ya no sabría decirte.

k_nelita  

Bueno, te cuento por si a alguien mas le pasa esto. Hace unos días me bajó una actualización, nunca se de que son porque la NetBook no me dice nada, supongo que sería del Chrome ya que coincidió con la desaparición de los favicones, la versión que tengo ahora es 19 y no se que mas...

Hoy puse manos a la obra y busqué todas las posibilidades de corregir eso, nada me resultaba ni cambiar el código del favicón arriba o abajo o ponerlo en los dos lados, nada...

Me fijé como lo tenía en un blog que si lo veía y lo puse igual en los que no lo veía y nada...

Entonces se me ocurrió ponerlo en el gadget nuevo de "editar favicón" (yo no lo tenía allí en ninguno de los blogs), igualmente no se veía, entonces tome la url de esa imagen subida ahí y la puse en el código dentro de la plantilla y vualá! Apareció el dichoso favicón!

Hice lo mismo en el otro blog que tampoco veía favicón, con el mismo resultado, ahora abemus favi en todos lados :)

Lo raro de todo esto es el porqué sería que solo en algunos de mis blogs no lo veía... misterios de Blogger, Internet o vaya una a saber que...

Asunto resuelto, fin de la historia! Espero que al alguien mas le sirva (espero no ser la única boba que le pasaba :S)

Gracias por todo :D

JMiur  

Es probable entoncs que la imagen no fuera accesible por algún motivo. La forma más simple de poner un favicon en Blogger es esa, usar el sistema mismo que ya existe hace un tiempo.

k_nelita  

Si, pero solo con ponerla allí no salía, tuve que tomar esa url y copiarla en el código de la plantilla...
Las imágenes estaban subidas a Blogger y aún así no las tomaba hasta que le cambié la url por la puesta en ese sistema... raro...

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