Cambiar el fondo principal. | Oloblogger A través de vuestras preguntas voy detectando que cosas que se suponen fáciles, para muchos no lo so...

6 de mayo de 2010

Cambiar el fondo principal.

A través de vuestras preguntas voy detectando que cosas que se suponen fáciles, para muchos no lo son tanto, así que seguiremos engrosando el contenido de la etiqueta BPT.

En esta ocasión es el turno de ver cómo cambiar el fondo de un blog, que para todos los casos que se explican, requiere modificar nuestro selector CSS llamado body.

En primer lugar tenemos que escoger qué tipo de fondo queremos. Un fondo puede ser un color plano o cualquier otro tipo de imagen. Con lo primero no hay mayor problema, porque se trata de indicar un color en código hexadecimal y nuestro fondo se verá por completo de ese color (ver tablas de colores por gentileza de Ciudad Blogger).

Como se ha anticipado, esto lo ponemos en el selector body (amén de otros atributos comunes que necesiteis para todo el blog) mediante la propiedad background. Si ya tenemos definido un background, simplemente cambiamos su contenido. Sin miedo. Podemos ver los resultados con Vista Previa antes de grabar los cambios de manera definitiva.

body {
background:#990000;
}

Con las imágenes tampoco hay demasiado problema, pero existen varios sistemas distintos. Comenzamos con el de colocar una imagen grande que ocupe todo el espacio visual del navegador y que no se mueva al hacer scroll.

Tanto en este caso como en los restantes, necesitaremos escoger la imagen que nos guste y lo que es más importante, un lugar dónde alojarla para luego poderla utilizar. Sobre esto último, para Blogger lo mejor es alojarla en Picasa (Blogger a fin de cuentas), aunque también se puede subir a un post sin publicar (borrador) que bien podríamos usar también para otras imágenes que vayamos necesitando alojar en algún sitio en el futuro. Una vez alojada, lo que copiamos es su URL o dirección.

Para la imagen fija de fondo, el código sería...

body {
background: url("http://dirección_imagen") center no-repeat fixed #ffffff;
}

Si entendeis inglés, los atributos son prácticamente autoexplicativos: center para centrar la imagen, no-repeat para que no se repita y fixed para que se quede fija. El último código hexadecimal es optativo y sólo será visible mientras se carga la imagen o en los espacios dónde esta pudiera ser transparente (formatos .gif y .png).

Un ejemplo de cómo quedan este tipo de fondos, lo podeis ver en Decora tu blog, dónde además hay varios modelos para descargaros. Usando este sistema, puede ser necesario eliminar el fondo de las entradas u otros elementos, o incluso cambiar el ancho de vuestra plantilla. En la página del enlace, para ajustar el blog a sus diseños y por facilitaros la tarea, proponen cambiar la plantilla a una Mínima y así se hacen ambas cosas de una tacada.

Esta forma de montar un fondo es viable y a veces necesaria para montar la cosa a nuestro gusto, pero presenta algunos inconvenientes que teneis que conocer:
  • la imagen tendrá un peso considerable y demorará la carga de la página
  • el ancho para cada usuario es imprevisible (dependerá de cómo tenga ajustada cada uno su resolución), por lo que en resoluciones pequeñas se cortarán los laterales de nuestra imagen y en las grandes se podrían quedar huérfanos.
  • para solucionar esto último el ancho de la imagen tendrá que ser realmente grande (más de 1200px-1500px), incrementando el problema del primer punto

Una posible mejora sería prescindir de una gran imagen y usar otra igualmente ancha, pero menos alta. Esta imagen la repetiremos verticalmente con un repeat-y. Para que todo vaya bien, es necesario que la parte superior de la imagen case con la parte inferior, al modo en que lo hace una baldosa con otra.

Fondos de este tipo podeis encontrar por doquier en internet, pero si sois un poco mañosos con algún editor de imágenes, también podeis crearlo vosotros mismos partiendo de cualquier otra imagen, aunque no estuviera expresamente destinada a fondo.

El código en este caso cambiaría sólo en cuanto al atributo de repetición:

body {
background: url("http://dirección_imagen") center repeat-y fixed #ffffff;
}

Para usar imágenes todavía más pequeñas en cuanto a peso, ya nos conviene reducir sustancialmente el ancho (100, 200, 300px...) y conseguir una imagen que case tanto arriba-abajo como izquierda-derecha, ya que lo que vamos a hacer es teselar por completo el fondo.

Para ello y comparativamente con los casos anteriores, sólo necesitamos quitar el atributo de repetición. Repetir tanto en vertical como en horizontal, es lo que hace la propiedad background por defecto, es decir, cuando no tiene atributo alguno al respecto. Si escribimos repeat, conseguimos exactamente lo mismo...

body {
background: url("http://dirección_imagen") center fixed #ffffff;
}

Y por fin, el caso más usual... que el fondo se mueva al tiempo que el resto de la página. Para esto eliminaremos en cualquiera de las dos últimas variantes (repetición vertical, repetición en ambos sentidos) el atributo fixed. En la primera (sin repetición), al utilizar una sola imagen, si esta no estuviera fijada, al hacer scroll pasariamos a ver lo que hay debajo de dicha imagen; es decir, nada... o en el ejemplo, un fondo completamente blanco (#ffffff). Por tanto, en el caso de una sola imagen para todo el fondo, sin repetir, deberemos usar siempre fixed.

body {
background: url("http://dirección_imagen") center repeat-y #ffffff;
}


body {
background: url("http://dirección_imagen") center #ffffff;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

84 comentarios :

  1. Excelentes (como siempre) tus últimas entradas. Es de agradecer que compartas todos estos conocimientos que resultan tan útiles.

    Un saludo

    ResponderEliminar
  2. hola gracias =D aun trato d arreglar el blog de mi agencia D: soy mas bruta

    ResponderEliminar
  3. Hola,Oloman

    Verás he observado que cuando buscas imágenes en google y entras en la imagen y le das a ver en tamaño originalno le da tiempo a cargarse el blog y por lo tanto no cuenta como visita.

    ¿Habría alguna forma de inhabilitar esta opción hasta que se cargue el blog? O algo parecido

    Si quieres comprobarlo pon en google javierlota y haz click en una imagen de

    http://elartedelafotografiaconjavierlota.blogspot.com y seguido en ver imagen en tamaño completo.

    Gracias

    ResponderEliminar
  4. Javierlota, el contador de tu blog se mueve cuando accedes a él a través de Google Images.

    De todas maneras, la única forma que conozco de evitar esto, es que Google no indexe tus imágenes, pero eso ya sabes que implicará que no se puedan encontrar con el buscador.

    ResponderEliminar
  5. Prefiero dejarlo como está

    Gracias Oloman

    ResponderEliminar
  6. Hola.
    Yo quiero saber como se pone
    eso que tienes abajo del publicar un comentario ,
    ¿como hago para hacer uno de esos?
    Gracias.

    ResponderEliminar
  7. Hola Sumer. Aquí lo tienes...
    http://oloblogger.blogspot.com/2009/08/blogger-modificar-el-formulario-de.html

    ResponderEliminar
  8. Hola! antes de que saliera la herramienta del diseñador de plantillas, tenía un fondo que me gustaba bastante aplicado a la plantilla Mínima.

    Cambié a una de Tina Chen muy diáfana, y ahora me estoy planteando colocarle el fondo que usaba antes. ¿Es posible cambiar el fondo en este tipo de plantillas nuevas? ¿podrías explicarlo como si fuera para una niña de tres años? Algunos códigos no son iguales en estas plantillas que en las viejunas...

    Gracias anticipadas y besos!

    ResponderEliminar
  9. Hola Oloman, ¿puedo publicar este artículo en mi blog? Claro está que te pondré como fuente principal, ya sabes cual es mi blog :)

    Gracias

    ResponderEliminar
  10. Majo, creo que en las plantillas creadas con la herramienta que citas, el BODY sigue siendo el BODY y por tanto, la explicación de la entrada sirve igual. Más detallado que ahí, no lo sabría hacer. Prueba con eso y si tienes algún inconveniente, ya me concretas.

    Héctor, no hay problema, pero que sea una referencia bien grande :D

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  12. La entrada dice así:
    Cotilleando por el magnífico blog de Oloman, Oloblogger, me he encontado con esta magnífica entrada sobre cómo cambiar el fondo del blog...
    Espero que sea de tu gusto Oloman :D

    ResponderEliminar
  13. Por cierto, para poner como fondo una imagen en movimiento (GIF animado) ¿que tendría que hacer?

    ResponderEliminar
  14. Exactamente lo mismo, pero en lugar de un .jpg, tendrías que usar un .gif, que es el formato de imagen que permite animación. De todas formas hay que tener cuidado en que la animación sea muy sutil, a menos que lo que quieras sea marear a los lectores.

    Por cierto... ¡eres muy pelota! :D

    ResponderEliminar
  15. Ah ok, gracias por la aportación

    ResponderEliminar
  16. Hola quisiera poner un logo arriba de mi pagina en formato flash, pero no sé como hacerlo este es el enlace http://www.fileden.com/files/2008/1/26/1721646//TOLF.swf mi blog es TOLF (Tu Objetivo La Fama), me puedes escribir a mi correo si quieres es tuobjetivolafama@gmail.com

    ResponderEliminar
  17. Hola. Primero tienes que hacer lo que se explica aquí y luego crear un nuevo gadget arriba e insertar el flas así.

    No lo he probado, pero supongo que no te dará problemas.

    ResponderEliminar
  18. La pregunta obvia (al menos para mí) sería como cambiar los fondos pero de forma aleatoria, es decir: que cambien cada que uno entre al blog o refresque el mismo.

    ResponderEliminar
  19. hola Oloman, muy buen blog, bueno resulta que mi plantilla de bloggertiene un fondo, pero el fondo que he modificado solo llega hasta un limite intente modificarlo para que se fuera hasta abajo, despuesdel limite del fondo hay un fondo gris claro. no lo encuentro en mi plantilla,ojala me pudieras ayudar saludos

    ResponderEliminar
  20. Flame Zero, el problema está en que tienes un repeat-x que hace que el fondo no se repita hacia abajo. Echale un vistazo de nuevo a este mismo post y a tu div#body para averiguar por qué tienes que eliminar allí ese repeat-x.

    ResponderEliminar
  21. Excelente el blog los vengo siguiendo, una consulta, quiero cambiar de fondo a mi blog, la imagen lo tengo alojada en picasa y la direcion es esta http://picasaweb.google.com/jhv07ster/PalcamayoEducacion#5473083643473443794, y no muestra nada, pero cuando cambio por otra url que termina en la extension jpg ahi si lo muestra, entonces mi duda es esa como es que saco la url donde esta alojada en picasa si solo me muestra esto: http://picasaweb.google.com/jhv07ster/PalcamayoEducacion#5473083643473443794.

    ResponderEliminar
  22. Hola Jaime

    Tienes que pinchar en la miniatura y cuando veas la imagen completa, con el botón derecho, "copiar la ruta de la imagen". Debería ser algo como esto:
    http://lh4.ggpht.com/_nDG-iMJwaUM/S-L4HqTrU_I/AAAAAAAAAC0/BHyL5NFt38A/s800/283506470_7df3958c43_o.jpg

    En la columna de la derecha, en "Más información", también puedes obtener la dirección final, la que hay tras "sXXX/"

    ResponderEliminar
  23. Hola Oloman gracias, por la respuesta te pasaste, la url lo encontre esta la opcion propiedades, pero ahora el problema es que la imagen que eh subido a picasa es del tamaño, 3000 px X 133 px, pero cuando lo muestra en las propiedades de Picasa lo baja a 600 x 28. Y logicamente la imagen no cubre el fondo total. Que me sugieres espero tu ayuda Oloman y gracias una vez mas. te envio la dirección de mi blog para que veas como queda, no cubre al ancho del fondo, solo se ve en la cabecera y al final.
    http://jaime-huaman.blogspot.com/. Gracias

    ResponderEliminar
  24. Hola Jaime

    Cambia el número 640 de la URL de tu imagen por un 1600... Ya me cuentas ;)

    ResponderEliminar
  25. Gracias Oloman, como siempre acertado, si corre bien, muchas gracias. Bueno, tal vez te voy parecer pesado, ahora el otro fondo como lo cambio asi como el tuyo que es como una hoja de cuaderno. Yo hago animaciones en flash que pagina me recomiendas para alojarlos y desde ahi poder anexarlos a mi blog. Gracias Oloman, chevereee tu blogs.

    ResponderEliminar
  26. http://oloblogger.blogspot.com/2009/02/fondos-bloc-para-post.html
    y
    http://oloblogger.blogspot.com/2010/03/alojar-ficheros-swf-en-sites-google.html
    Suerte ;)

    ResponderEliminar
  27. Hola, primero, felicidades por el blog, además de la estética el contenido es muy bueno!

    Tengo una pregunta, ya que ahora ha cambiado el sistema de blogger y utlizando el código que escribes aquí, me da un error:

    las imagenes que uso de fondo empiezan siempre como a 400px de la cabecera. No empiezan desde arriba. He probado con todas las opciones de código con distintas imágenes y distintas plantilla de las nuevas y no lo consigo.

    Sabes porqué pasa? hay que cambiar algo?

    Gracias!

    ResponderEliminar
  28. Hola Coco Moya.
    No he experimentado todavía con las nuevas plantillas, pero supongo que lo del fono no debe ser muy distinto de como se explica aquí. De todas formas, como soy todo "visual", necesitaría que me dijeras cual de tus múltiples blogs es el que te da el problema para echar un vistazo.

    ResponderEliminar
  29. Hola de nuevo, pues te comento:

    Estoy experimentando con este en concreto, cuya plantilla es la "simple".

    http://julieforhhammer.blogspot.com/

    En el apartado nuevo de "diseño > avanzado > CSS" , hay un botón de ayuda que te lleva aquí:

    http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=175740

    En esta página te dan un código para cambiar el fondo que es el siguiente:

    .body-fauxcolumn-outer {
    background: url(http://www.example.com/image.png); }
    .body-fauxcolumn-outer div {
    background: none;
    }

    Y al colocarlo -y poner la dirección de la nueva fotografía- no aparece absolutamente nada.


    Cuando pruebo con el código que tú das aquí, coloca la foto a partir de la mitad de la página. La parte superior del fondo se sigue quedando gris.

    Como este sistema es muy nuevo no encuentro nada de nada por la red! qué difícil!

    Pero muchas gracias de antemano.

    ResponderEliminar
  30. hola oloman que tal saludos,ooie esoty creando u nuevo blog pero no se si el fondo es unaimagen o un color y la verdad es que no encuentroel codigo que tu tienes ,ni hayo uno parecido,espero que mepuedas ayudar.

    Gracias.

    ResponderEliminar
  31. Coco Moya, le doy una vuelta y mañana publico algo que te sirva.

    Orochimarusama, creo que estás usando una plantilla para Wordpress y esas son muy distintas de las de Blogger. De todas formas, para cambiar tu imagen, tendrás que buscar este selector:
    body{background:#1e1912 url(http://2.bp.blogspot.com/_Z8F7gBEfQSU/S_2597l7VwI/AAAAAAAAA4I/nuvFth6nrQ0/s1600/background.png) top left repeat-x}
    Ahí está la imagen que forma tu fondo principal.

    ResponderEliminar
  32. Hola Oloman!
    lo primero felicitarte por el blog,ayuda bastante...Yo estoy empezando a crear ahora mi blog y la verdad es que me surgen bastantes,quizas demasiadas,dudas..jaja..
    He conseguido poner la foto de fondo pero como ppodria hacer para que la foto no se repita?me gustaria q saliese solo una vez y el resto del blog tuviese fondo negro..Es posible?
    Te dejo mi boceto de blog por si necesitases echarle un ojo: acerandoellargo.blogspot.com

    Muchas gracias!!

    ResponderEliminar
  33. Hola Beatriz. Claro que se puede. Sólo tienes que añadir no-repeat al atributo background y luego añadir el color, que es lo que cubrirá la parte que no ocupe la imagen. Como lo has hecho mediante dos líneas, lo mejor es que hagas una sola. Para ello, cambia esto...
    background:#aba;
    background-image:url(http://img695.imageshack.us/img695/9306/cima5copia.jpg);

    ...por esto...
    background:url(http://img695.imageshack.us/img695/9306/cima5copia.jpg) no-repeat #000000;

    Saludos

    ResponderEliminar
  34. Oloman,muchas gracias soy Beatriz la del comentario anterior...
    He introducido los cambios que me has dicho pero no cambia nada en el blog,no aparece lo que yo quería...no se si lo estaré metiendo mal o..es que hay que cambiar algo más!
    muchas gracias de nuevo!

    ResponderEliminar
  35. Beatriz, por lo que yo veo, todo está bien. Prueba a redactar más entradas de prueba para hacer más larga la página y verás que a medida que bajas, va apareciendo el negro.

    ResponderEliminar
  36. Efectivamente,creando otra entrada he visto resultados!muchisimas gracias!!Aunque como ves..nos cuesta esto de configurar en Html...asi que te seguiremos preguntando que eres de gran ayuda!!!muchisimas gracias de nuevo!!

    ResponderEliminar
  37. somos un poco ineptos jeje...pero nos gustaría poner en el lateral derecho del blog una pequeña presentación de los componentes del blog.
    Es decir,una fotito y una pequeña descripción de esa persona,mas abajo otra fotito y otra descripción y así...pero no sabemos!! si nos pudieras aydar una vez más lo agradeceríamos.
    muchas gracias y un saludo oloman!

    ResponderEliminar
  38. Eso lo haceis desde Diseño > Elementos de página >. Luego en el lugar de la barra lateral Añadir gadget > Tipo HTML/JavaScript.

    Dentro del cuadro emergente, tecleais el código de todo lo que quereis poner. Un ejemplo para el primero:

    <img src="DIRECCION_AVATAR" style="float:left; margin:5px;border:0px;" /> Texto que acompaña la imagen.

    ResponderEliminar
  39. Hooola, que gusto ver que alguien comparte sus conocimientos, ya he intentado y no he obtenido respuestas: ¿Cómo cambio mi plantilla? he visto unas muy bellas en el blog decoratublog y no ha sido posible hacerlo. Será que me colaboras porfa, mi blog es http://imagamulata.blogspot.com/ esta muy elemental pero quiero mejorarlo y aprender bastante, sólo veo el tuyo y me sorprende taaantas opciones que al ver los menus del blog no entiendo o no sé las rutas, no soy programadora pero dizque me sentía hábil con estas vainas... ahora me siento retorpe y con eso y todo, sé que soy capaz de hacerlo mucho mejor.

    Salu2 desde Medellín-Colombia.

    Atte,

    paumulata@gmail.com

    ResponderEliminar
  40. Hola Paumulata

    A ver... para cambiar la plantilla a la manera que propone Decora tu blog, sólo tienes que seguir las instrucciones que allí te dan. Si quieres, puedes verlo también explicado a mí manera en el anterior enlace.

    Sin embargo, para instalar otro tipo de plantillas y no sólo adornar el fondo, no he dado nunca unas pautas exactas, aunque te puedes hacer una idea en Cambiar la plantilla ¿Quién dijo miedo?

    Un saludo.

    ResponderEliminar
  41. Hola Oloman, también soy de los que le dio por cambiarse a las nuevas plantillas de blogger y tengo algunos problemas al implementar la imagen de fondo, ya que los scripts que coloco debajo de la cabecera me salen redimensionados, como siempre muchas gracias, sigo tu labor todo el tiempo
    Mi blog de pruebas
    http://basecine.blogspot.com/
    Un saludo!

    ResponderEliminar
  42. Watesam, empecemos por lo fácil. Como desde hace sólo dos días hay una nueva utilidad para ello, por favor, inténtalo con ella:
    http://oloblogger.blogspot.com/2010/07/nuevo-disenador-usar-una-imagen-de.html

    Si no, esta otra opción no te debería dar problemas:
    http://oloblogger.blogspot.com/2010/06/cambiar-el-fondo-principal-en.html

    En cualquier caso, quita primero el que tú incluiste ;)

    ResponderEliminar
  43. Eres un experto en esto!!

    ResponderEliminar
  44. Hola!!! c q ya has contestado algo parecido antes, pero trato y trato y no puedo... quiero poner el fondo, pero el ancho de la imagen no da del todo y no encontré dónde modificarlo... espero estar buscando en el lugar adecuado... igual... mi script se ve algo así...

    <Variable name="body.background" description="Body Background" type="background"
    color="$(body.background.color)" default="#111111 url(http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs382.snc4/44504_424584305678_563130678_5132973_4821988_n.jpg) no-repeat fixed top center" value="#000000 url(http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs382.snc4/44504_424584305678_563130678_5132973_4821988_n.jpg) no-repeat fixed top center

    de antemano, GRACIAS!!!

    ResponderEliminar
  45. Maria Elsa, esta entrada es para plantillas clásicas y lo que me pones corresponde a una plantilla del nuevo diseñador.

    Date una vuelta por el enlace que te he puesto ;)

    ResponderEliminar
  46. Hoooolaaaaaa!!! estoy de vuelta jajaja... Eres genial!!! Me has ayudado muuuuuchoooooo!!! De link a link y con algunos parches, pero funcionó...y como veo q eres bueno pa ayudar... tengo otra duda... tengo un marquee pero quisiera que se repitiera sin dejar espacio entre la última letra y el inicio del mismo al repetirse... espero me entiendas... si quieres verlo... es
    itugs-usac.blogspot.com

    de momento, lo repetí varias veces pero quisiera que el script quedara más corto... como un loop o algo similar

    pd-.éste es un proyecto para graduarme de Lic. en Diseño Gráfico, por si tiene sugerencias... gracias...

    ResponderEliminar
  47. María Elsa, todos los efectos de marquee que he visto (incluso en JavaScript, es decir, sin ese comando), dejaban el espacio entre frases. No sabría cómo evitar ese hueco.

    ResponderEliminar
  48. OK... entendido... lo dejaré como está entonces... igual lo repetí muuuuuuuuchas veces para q no ce vea tan rápido el corte... 100 pre gracias x tu ayuda... fíjo estás en mis favoritos y te molestaré de vez en cuando...

    ResponderEliminar
  49. Oloman estoy creando un blog y necesito ponerle una imagen de fondo que he creado pero me salen muchas imagenes de las mismas en el fondo y lo que quiero es que sea una sola imagen que cubra todo el fondo, por favor dime como hacerlo gracias

    ResponderEliminar
  50. Sel, si usas el nuevo diseñador, tendrás que cambiar eso desde esa herramienta, en FONDO.

    Si no, tendrás que buscar algún REPEAT que tienes por ahí mal puesto. En la entrada se explica un poco como funciona eso.

    ResponderEliminar
  51. OLOMAN hize eso pero en INTERNET EL FONDO NO SE VE, que hago? probe en JPG, y con PNG y sigo sin verlo, en mozilla lo veo normal en IE se ve todo blanco que estoy haciendo mal?

    aqui esta el css:

    body {
    background:url(http://i51.tinypic.com/2n0uf4z.png)no-repeat ;background-position: top;
    margin:0;
    color:$textcolor;
    font-family:Verdana;
    font-size:11px;
    text-align: center;
    }

    http://rdm-gaming.blogspot.com/

    ayuda por fabor!

    ResponderEliminar
  52. Renzo, el código es correcto. Además, en IE (8) yo lo veo bien. Lo único que añadiría sería un color a esa línea que forma la imagen de fondo, para el caso de pantallas muy anchas. En la mía, los laterales se ven blancos.

    ResponderEliminar
  53. Hola oloman tienes razon, tambien veo las laterales blancas en mi monitor LCD.

    Pero me surgio otro inconveniente, en el trabajo veo todo disparejo... te explico mejor.
    En mi trabajo tengo un monitor normal esos antiguos y el menu, esta todo descuadrado, pero en la LCD se ve normal, e usado el codigo de ABSOLUTE Y RELATIVE, algo asi como tu tienes en tu link de SINGENIO, el que tienes a la parte derecha de arriba, se ve bien en todas las resoluciones.

    MI PREGUNTA SERIA. COMO HAGO PARA QUE SE VEA TODO IGUAL SEA LCD O LO QUE SEA EL MONITOR, NESECITO ARREGLAR ESO URGENTE :(

    ResponderEliminar
  54. Las clases RSS y RSS2 que creo tienen un ABSOLUTE. Eso está bien, pero son absolutas con respecto a la página y por eso se mueven cuando esta cambia de tamaño. Su contenedor inmediato superior es #header. Para que ese ABSOLUTE que pusiste sea con respecto a este último contenedor, #header debería llevar un RELATIVE.

    Más información en estas entradas:
    * http://oloblogger.blogspot.com/2010/06/aprende-posicionamiento-css-en-10-pasos.html
    * http://oloblogger.blogspot.com/2009/03/position-imagenes-fijas-o-desubicadas-i.html
    * http://oloblogger.blogspot.com/2009/03/position-imagenes-fijas-o-desubicadas.html

    ResponderEliminar
  55. Hola

    ME SIRVIO MUCHO TU PUBLICACION, YA PUDE INSERTAR EL FONDO, PERO AHORA LAS LETRAS DEL BLOG SE VEN ENCIMADAS:

    http:www.imagrotesqueimpalement.blogspot.com

    EXISTE AGUNA FORMA QUE SE LE PUEDA INSERTAR UN FONDO DE UN COLOR FIJO ATRAS DE DONDE VAN ALS PUBLICACIONES? DE FORMA QUE MI FONDO PRINCIPAL SE PUEDA SEGUIR APRECIANDO?

    Saludos agradeceria tu respuesta grotesque_kurt@hotmail.com

    ResponderEliminar
  56. Grox, para que las entradas se vean con un fondo propio y evitar eso, tendrás que hacer lo mismo que se indica en este post, pero con el ID #content. Idem para #header, #sidebar y #footer;

    ResponderEliminar
  57. Hola estoy tratando de poner un fondo con un patron en mi blog, pero no logro que no se note el margen donde se unen es decir donde termina una imagen y comienza la otra, para un ejemplo tengo un blog con una plantilla ya hecha donde lograron hacer el patron impecable, http://animetebayo.blogspot.com/
    y esta es la que yo quiero hacer
    http://dream-are.blogspot.com/ este ultimo es un blog que uso para aprender a editar por mi cuenta, gracias de antemano.

    ResponderEliminar
  58. Dreamare, botón derecho en la del "patrón impecable", "Ver imagen de fondo" y te darás cuenta de que realmente es una imagen grande en cabecera y para el resto un color plano. Por eso es impecable, porque es un color, no una imagen.

    ¿Te entendí mal o eso contesta tu pregunta?

    ResponderEliminar
  59. disculpa no me explique bien, por supuesto se que es una imagen y luego un color, yo mismo monte la imagen y al cambiarlo solucione el problema, en la nueva imagen con el nuevo color haciendola mas ancha porque la antigua era http://lh5.ggpht.com/_MUG1GUZBsHE/TUGNAUy6IjI/AAAAAAAAAJE/Oq5B3IEtIZ8/s512/back.png y al mezclarse horizontalmente se notaba el patron en la que yo hice, en cambio en la de la plantilla no, seguro usaban algo de css, igual ya lo solucione gracias exelente blog, saludos desde Medellin Colombia

    ResponderEliminar
  60. Ok, Dreamare. Entonces auto-solucionado por tí. Saludos.

    ResponderEliminar
  61. ¡Buenas! Aquí estoy después de mucho tiempo siendo cpaz de sacar adelante mi Blog sin darte mucho el coñazo pero hoy, se me atravesó una cosa y no hay manera...

    Resulta que he hecho que las entradas se vean como recuadros independientes y puse el fondo del outer-wrapper transparente. El caso es que el color del main-wrapper sobresale de los recuadros que he creado y no sé cómo solucionarlo. Pensé en ponerlo transparente y entonces en el formato de las entradas predeterminado poner una tabla con el color de fondo pero, eso implicaria tener que ir entrada antigua por entrada editando (¡menuda pereza!) además que tampoco cuadra del todo dentro del recuadro.

    ¿Alguna otra solución?

    Thanks.

    El Blog en cuestión: http://www.pippersneverland.blogspot.com.es/

    P.D.: Santa Claus me pregunta si quieres sal especiada ;)

    ResponderEliminar
    Respuestas
    1. Claro y además fácil. Quita ese lavanda del main-wrapper y mételo en .post-outer. Mano de santo, oiga.

      Y sobre la sal, todavía me queda un poco de la otra. Parece que aunque a mi familia no le desagrada tampoco se ha convertido en su aditivo favorito. Gracias igualmente por el ofrecimiento ;)

      Eliminar
  62. ¡Muchísimas gracias! Jue... ¡qué tontería! Y mira que pensé que sería algo así xD

    ResponderEliminar
  63. ¡Hola de nuevo!

    Resulta que en otro de mis Blogs al alterar la plantilla se me queda con un fondo blanco en vez de transparente, como si a parte del main wrapper y el outter hubiese uno entre medio que es blanco (http://pippersdiary.blogspot.com), ¿cómo elimino esa parte blanca, que además sobresale de la plantilla? La idea es que sea como mi otro Blog (http://pippersneverland.blogspot.com.es/) pero me he debido saltar algo en algún paso...

    Thanks

    ResponderEliminar
    Respuestas
    1. Si me lo pones tan fácil no tengo más remedio que contestarte ;)

      Busca un background con imagen en #outer-wrapper. Ese es el que te sobra.

      Eliminar
    2. No, no es eso. Cuando quito eso, me desaparece el fondo transparente, que es el que quiero mantener. Hay un fondo opaco que no soy capaz de eliminar...

      Eliminar
    3. Pero es que si el fondo es transparente, pero lo que hay debajo (el fondo del body) no lo es, pues no puedes conseguir lo que quieres. Mira, esta es la imagen que tienes en el body:
      http://i806.photobucket.com/albums/yy344/plumrose-lane/Blog%20Backgrounds%202/PrL-Treasures_of_the_Sea-2_col-1.jpg

      Eliminar
    4. Mmmhh... creo que no me explico. Estoy tratando de tener el fondo del Blog con el Treasures of the Sea, luego las entradas con uno transparente (para que se siga viendo el te Treasures), como hice en este Blog: http://pippersneverland.blogspot.com.es/ pero, por algún motivo, conseguí el fondo transparente y encima de éste uno opaco que no sé cómo quitarlo para conseguir el mismo efecto que tengo en el otro Blog...

      Thanks!

      Eliminar
    5. El que no se explica soy yo (como los enamorados: "No... cuelga tú primero") XD

      Confirmo que te entendí y a ver si ahora me explico. No hay ningún fondo opaco. Si quitas el semitransparente verás que se ve perfectamente el fondo de la imagen de fondo principal (Treasures_of_etc.) Lo que ocurre es que es claro y cuando pones el semitransparente encima te lo comes del todo.

      En el otro blog el fondo es azul -más oscuro- y el efecto final es distinto. Mira sola la imagen de fondo y verás que es idéntica a lo que tienes ahora cuando quitas el fondo del outer-wrapper. No hay ningún fondo opaco adicional.

      Eliminar
    6. Vaaaale... jajaja... no me había fijado en la franja que hay en medio de la imagen de Treasure xD

      Thanks a lot!

      Eliminar
  64. Hola buenas, veras tengo un problema y como no se donde exponerlo...lo pongo aqui...espero que no moleste a nadie, solo necesito ayuda y no se donde conseguirla

    Ayer por la tarde...desde el maldito Google io 2013....algo a pasado en blogger que ahora las fotografias .PNG que subo...el fondo transparente me lo convierte en negro y me cambia los tonos de los colores....

    tengo unas plantillas de botones...y a partir de ayer...cuando las subo... me ocurre ese problema.... ¿Podrias ayudarme?

    Muchas gracias mi blog es este http://mi-fotografiadigital.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. No sé qué puede tener que ver Google IO con Blogger, al menos desde web, pero es que tampoco he observado ese fallo que comentas por ningún sitio. De hecho, si te refieres a los botones que tienes en tu barra lateral izquierda, yo los veo bien. A ver si va a ser algo local, es decir, de tu navegador o tu PC.

      Eliminar
  65. Hola, que tal. Tengo un problema con un fondo y he pensado que quizás podrías ayudarme. Resulta que estoy creando un blog (pero como soy novata...)y le puse un fondo de una página que una chica hace. Pero resulta que una vez puesto no me acabó de convencer. Entonces decidí poner una plantilla de Btemplates y cuando visualizo mi blog el fondo que me sale és el primero que puse y no el que viene con la plantilla en cuestión. No sé como eliminar el fondo que puse primero. Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola. Si buscas en tu CSS el selector body {..., dentro de él encuentres un background con una dirección de una imagen. Esa dirección es la que tendrías que quitar. Pero no puedo saberlo seguro si no veo el blog.

      Eliminar
  66. Hola Oloman,
    hacía tiempo que no te escribía por aquí, he pasado unos meses estudiando 3D y aún sigo ocupado en otros proyectos (Además de reparar móviles y PCs).

    Pero tengo el Blog hecho un desastre, sobre todo el fondo, y pensé, que poner una animación CSS de fondo en el Blog podría ser divertido.

    Y espero que no sea molestia si dejo este enlace aquí: http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background
    Pues me gustaría ponerlo de fondo en mi Blog pero he pasado 5 horas ya tocando el position sin conseguirlo. Por eso te pregunto y a la vez te hago una propuesta para que puedas crear un artículo, sobre cómo poner un fondo animado full CSS en el body, en Blogger.

    Seguiré intentándolo, porque quiero que las nubes salgan desde la derecha hacia la izquierda sin generar un scroll horizontal y que queden tras el resto del Blog.

    Muchas gracias por tu atención,
    saludos desde Cádiz, Oloman.

    ResponderEliminar
    Respuestas
    1. Hola. Lo he montado de manera rápida aquí, sobre otra demo que hice anteriormente, y parece que funciona. A ver si te aclaras con eso porque ahora mismo no puedo hacer un tutorial sobre ello.

      Eliminar
    2. Gracias Oloman! :D
      Lo estoy revisando, quiero que las nubes salgan desde la derecha, es que aparecen por en medio de la pantalla.

      Pero no importa, tampoco pasa nada sobre lo de hacer un artículo sobre ello. Sólo lo sugería porque imagino que hay gente a la que le gustaría, puro CSS.

      Saludos.

      Eliminar
    3. ¡Oh, Dios! Gracias Oloman.
      Es que si uno pasa más de un mes sin tocar código, se va de la cabeza. Sólo necesitaba un overflow hidden y estaba delante de mis narices pero estaba como zombi y no me enteraba de nada.

      Gracias de nuevo xD

      Eliminar
  67. Hola Oloman.
    Me gustaría saber si es posible mostrar únicamente una imagen de fondo en el blog, ya que voy a redireccionar 1 dominio.

    Me gustaría saber si solo se pudiera mostrar la imágen que tengo de fondo y que se vea del tamaño completo de la pantalla.

    La imagen es la siguiente:
    http://pruebatpd7.blogspot.com/


    Solo quiero que aparezca nada más la imagen y mas nada.

    Te lo agradecería enormemente.

    Muchas gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Carlo, quizás te resulte de interés este viejo artículo

      Eliminar
    2. Excelente Oloman... muchas gracias por la info, me fue de gran ayuda, mira: www.puroingenio.com.ve

      Enormemente agradecido.

      Un saludo!!!

      Eliminar