Cambiar color de fondo del blog por una imagen

15 de febrero de 2009 418 comentarios ,
En esta ocasión aprenderemos cómo cambiar el fondo de nuestro blog por una imágen o cambiar la imagen de fondo actual por otra. Para ello ve a Plantilla | Edición de HTML y busca este código:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor;
font-family: arial,verdana,helvetica,tahoma;
font-size: 100%;
width: 100%;
}

Es posible que tu código no se vea exactamente como este, ya que varía según su plantilla, lo importante es que localices el background que está dentro de body {
Ahora lo que hay que hacer es cambiar lo que está en rojo por este código:

background: url(URL de la imagen) no-repeat;
background-attachment : fixed;

Sólo cambia donde dice URL de la imagen por la dirección donde tienes alojada la imagen de fondo que vas a usar. Si quieres que el fondo se mueva cuando bajen la página con el scrollbar entonces omite la última línea del código.
Con ese código la imagen no se repetirá, pero si tu imagen es pequeña o un patrón (pattern) entonces elimina lo que está en negrita para que la imagen de fondo se repita.

Si sólo quieres cambiar el color de fondo en lugar de una imágen entonces sólo cambia el código de color, por ejemplo: background:#fffff; esto dará un fondo de color blanco.


418 comentarios en:

" Cambiar color de fondo del blog por una imagen "

  1. wow excelente tip, muchas gracias!!!!!

    ResponderEliminar
  2. hey gracias por lo del width ya q no me quedaba la imagen al tamaño y no sabia porque :S
    gracias de nuevo

    ResponderEliminar
  3. Funciono como lo esperaba, eres todo un experto, por eso pondre tu enlace en mi blog, es lo menos que puedo hacer por tu ayuda....

    Thank you!!!!!!

    omegagil....

    ResponderEliminar
  4. Hola antonio blog,
    Qué bueno que te sirvió. Muchas gracias por el enlace =)

    Saludos.

    ResponderEliminar
  5. parece que todos quedaron satisfechos pero a mi me salta esto "Se ha encontrado más de un artilugio con el ID: Image65. Los ID de artilugio deben ser exclusivos."
    porfavor si podes decirme que estoy haciendo mal, porqué sigo todo al pie de la letra y siempre me salta eso..porfavor necesito tu ayuda amigo!
    desde ya gracias.

    ResponderEliminar
  6. Hola Lea-182,

    En realidad el problema no es con este truco, lo que sucede es que tienes dos gadgets de imágenes repetidos y aunque ahora estás editando algo distinto la plantilla "aprovecha el momento" para recordarte que hay un error.

    El gadget de imagen que tienes repetido es el de la foto de Joey Ramone, ambos tienen el mismo ID. Si no te sirven los dos elimina uno, o bien si quieres conservar ambos, elimina uno y luego crea de nuevo el gadget.

    Después de hacer eso verás que podrás cambiar el fondo de tu blog sin ningún problema. De lo contrario cualquier cambio que quieras hacer en la plantilla te aparecerá ese mensaje y no te dejará hacer nada hasta que lo arregles.

    Si tienes alguna duda me comentas.

    Saludos.

    ResponderEliminar
  7. wee loco, sin mas que decir
    muchisimas gracias por la ayuda y los consejos:D
    quedo copadisimo, me encanta como quedo..te re ganaste un link en mi blog.
    disculpa que recien te puedo agradecer pero es que anddo re enfermo:/
    pero bueno master
    siceramente denuevo, muchisimas gracias!
    segui asi!
    saludos;D

    ResponderEliminar
  8. Hola Lea-182,

    Qué bueno que ya pudiste arreglar el problema y ya puedes hacer los cambios que querías.
    Deseo que ya te encuentres mejor de salud, sino un poco de blog te hará sentir mejor =)

    Gracias a ti por tus comentarios.

    Saludos.

    ResponderEliminar
  9. hola. aun no encuentro el codigo que tu pones en mi blogspot no viene asi podrias atudarme i decirme si es este
    body {
    margin: 0;
    text-align: center;
    min-width: 760px;
    background: #ce436e url(http://www.blogblog.com/thisaway_rose/bg_body.gif) repeat-x $startSide top;
    color: $textColor;
    font-size: small;
    }

    ResponderEliminar
  10. Hola Yummi party,

    Cambia ese código que me dices por esto:

    body {
    margin: 0;
    text-align: center;
    min-width: 760px;
    background: url(AQUÍ VA LA DIRECCIÓN DEL FONDO DE LA IMAGEN) repeat;
    color: $textColor;
    font-size: small;
    }

    Agrega la dirección de la imagen donde se indica y listo.

    Saludos.

    ResponderEliminar
  11. Esto tampoco me funciono ya van 2 buuuu coloque la url de la imagen mia y no causo ningun efecto??? plop una imagen para los comentarios tampoco me resulto???

    ResponderEliminar
  12. Hola RonnyTemxcano,

    Verifica que la URL de la imagen es correcta, quizá ahí pueda estar el problema para que no se muestre en este truco y en el de la imagen de fondo en las entradas.

    Saludos.

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

    ResponderEliminar
  14. Potro la imagen de la url tiene que ser *bmp, *jpeg, *gif, para mejor resultado o la extención da lo mismo...otra cosa la mayor parte de los upload para subir imagenes te dan como 4 o 5 posibilidades de url de enlace cual es el optimo para enlazar, yo utilice www.subirimagenes.com y me da estas opciones:

    Previsualzación:
    Códigos BBcode phpbb:
    Otros Códigos BBcode:
    Imagen html:

    ResponderEliminar
  15. Hola RonnyTemxcano,

    No importa la extensión, aunque .jpg es más liviano que otras extensiones.
    Desconozco esas opciones, pues cada servidor tiene distintas, pero busca una URL parecida a esta:

    http://loquesea.com/usuario/imagen.JPG

    Como ves la URL debe terminar con el nombre del archivo y la extensión.

    Saludos.

    ResponderEliminar
  16. Hola, quisiera saber si es posible poner una imagen, pero para el fondo más leejos de todos, detras de los post y eso. Porfa ayudame! =)

    ResponderEliminar
  17. Hola Simon Potter,

    No sé a qué te refieras con "más lejos de todos". Cambiando el fondo como se explica acá, la imagen estará detrás de los posts y de los gadgets.

    Saludos.

    ResponderEliminar
  18. Yo tengo esto en pantalla y deseo cambiar el color por una imagen como hago q cambio?

    body {
    margin:0px;
    padding:0px;
    background:$bgcolor;
    color:$textcolor;
    font-size: small;
    }

    ResponderEliminar
  19. Hola ISIS FILMS,

    Quedaría de este modo:

    body {
    margin:0px;
    padding:0px;
    background-image: url(URL de la imagen);
    color:$textcolor;
    font-size: small;
    }

    Sólo cambia la URL de la imagen.
    Saludos.

    ResponderEliminar
  20. Gracias amigo Potro me sirvio tu consejo.
    ahora quisiera que la imagen sea una sola no varias.
    tengo esto:
    #header {
    padding-top:0px;
    padding-$endSide:0px;
    padding-bottom:0px;
    padding-$startSide:0px;
    margin-top:0px;
    margin-$endSide:0px;
    margin-bottom:0px;
    margin-$startSide:0px;
    border-bottom:dotted 1px $bordercolor;
    background:$descbgcolor;
    }

    ResponderEliminar
  21. Hola ISIS FILMS,

    Sólo hay que agregarle al código anterior un no-repeat, quedaría así:

    body {
    margin:0px;
    padding:0px;
    background-image: url(URL de la imagen) no-repeat;
    color:$textcolor;
    font-size: small;
    }

    De esa forma la imagen de fondo sólo aparecerá una vez.
    Saludos.

    ResponderEliminar
  22. amigo potro:
    al colocar no-repeat el fondo se torno blanco, a que se debe eso? no habra otro codigo.

    ResponderEliminar
  23. Ummm no, fíjate que lo hayas puesto tal como te lo puse en el comentario. Si sigue el problema dime la URL de tu blog para verificar el código.
    Saludos.

    ResponderEliminar
  24. amigo potro ese es:
    http://hhonores.blogspot.com/

    ResponderEliminar
  25. No veo que hayas puesto el código para la imagen, tienes el fondo del blog en color negro, no entiendo a qué te refieres =S

    ResponderEliminar
  26. a disculpame te lo enviare con el fondo en este momento.

    ResponderEliminar
  27. Hola ISIS FILMS,

    Acabo de entrar a tu blog y lo veo bien, con un fondo de figuras egipcias. Parece que ya se ha resuelto el problema, cualquier cosa me comentas.

    Saludos.

    ResponderEliminar
  28. amigo potro lo que deseo es que se vea una sola imagen del wallpaper en el blog, vez varias veces la misma imagen repetidas, el codigo q me enviaste de no-repeat no me funciono pues el fondo se pone blanco que me aconsejas.
    derrepente hay otro codigo.

    ResponderEliminar
  29. Ok, ya hice una modificación, debe quedar así:

    body {
    margin:0px;
    padding:0px;
    background: url(URL de la imagen)no-repeat;
    color:$textcolor;
    font-size: small;
    }

    Con este tendrás la imagen de fondo pero no se repetirá, sólo aparecerá una vez.
    Saludos.

    ResponderEliminar
  30. NO TUVE EXITO AMIGO, POR LO PRONTO LE HE PUESTO UN FONDO NEGRO JASPEADO QUE TAMBIEN SE REPITE PERO NO SE NOTA.
    PERO AUN QUEDO INCONFORME PORQUE NO TENGO EL FONDO DESEADO.
    SI CONSIGUES UNA SOLUCION CONTESTAME, GRACIAS POR TU TIEMPO DE TODOS MODOS.
    SALUDOS.

    ResponderEliminar
  31. Hola ISIS FILMS,

    El último código que te di es el mismo que usé para una prueba con la misma plantilla que usas y funcionó. Dime cuál es el problema ahora y vemos la solución, todo se puede arreglar no te preocupes. Si puedes dame la URL de la imagen que quieres y dime exactamente cómo quieres que quede la imagen de fondo.
    Saludos.

    ResponderEliminar
  32. Amigo Potro cuando escribi los codigos que me diste la imagen se veia varias veces.
    Te mando el url de la imagen que quisiera que salga la eh creado con el fin de promocionar mi negocio de eventos sociales aqui en lima peru y me encantaria que ese sea mi fondo de imagen.
    Si solucionas ese problem tambien te pediria otro servicio que es el de ponerle un tema musical de inicio a mi pagina, se podra?
    de antemano gracias por tu tiempo y dedicacion hacia mi persona.
    el url es:
    http://3.bp.blogspot.com/_5Jdqm9uTufc/StVWo9AsYxI/AAAAAAAAAPA/6bGTmJbF6-M/s400/Fondo+de+blog.jpg

    ResponderEliminar
  33. Hola ISIS FILMS,

    La imagen que quieres de fondo es muy pequeña, así que se puede centrar pero no creo que se aprecie mucho, este sería el código:

    body {
    margin:0px;
    padding:0px;
    background:#000 url(http://3.bp.blogspot.com/_5Jdqm9uTufc/StVWo9AsYxI/AAAAAAAAAPA/6bGTmJbF6-M/s400/Fondo+de+blog.jpg)center no-repeat;
    background-attachment : fixed;
    color:$textcolor;
    font-size: small;
    }

    Úsalo y dime qué te parece.
    Para la música de fondo puedes usar este reproductor:
    http://ciudadblogger.com/2009/01/reproductor-dewplayer.html

    Saludos.

    ResponderEliminar
  34. que dimension en centimetros debe tener la imagen para que pueda calzar exactamente?
    Si sabes escribeme.

    ResponderEliminar
  35. Tu plantilla no tiene una medida específica de ancho pero puedes hacerla al mismo ancho de tu cabecera (56.44 cm) el problema es que cuando las imágenes de fondo son muy grandes tarda mucho en cargar la página.

    ResponderEliminar
  36. Hola potro,
    queria preguntarte si puedo cambiar el fondo por una imagen que tenga en mi computadora, en lugar de un url de la web.

    En caso que sí, como hago?

    mil gracias desde ya

    ResponderEliminar
  37. Hola cerâmica no mapa,

    Necesitas subir ese fondo a un servidor, puedes usar uno gratuito como Imageshack o TinyPic.
    Es necesario que la tengas en la red para poder usarla en el blog.
    Saludos.

    ResponderEliminar
  38. Hola : lo primero agradezco el interés que tienes en atender nuestros problemas con los blog, en micaso lo que quiero es que el fondo del blog no se mueba, te mando copia del body por si lo necesitas ver.
    la página es
    http://charlyparti2.blogspot.com/
    gracias por todo, soy fiel a tu blog


    */

    body {
    background: url(http://img132.imageshack.us/img132/5863/ffondoverde3.jpg) no-repeat top center ;
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:$mainTextColor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    ResponderEliminar
  39. Hola charly

    Sólo agrega lo que está en negrita:

    body {
    background: url(http://img132.imageshack.us/img132/5863/ffondoverde3.jpg) no-repeat top center ;
    background-attachment : fixed;
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:$mainTextColor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    Saludos y gracias por tus comentarios!

    ResponderEliminar
  40. gracias amigo se ve de lujo... y del tutorial, ni que decir.. esta chido 100% compronsible..

    ResponderEliminar
  41. Gracias por tus comentarios.
    Saludos!

    ResponderEliminar
  42. Hola Potro.
    Ya cambié el fondo por una imagen.
    En mi caso, y según lo que ya te había comentado por correo, en mi sidebar derecha (Destacados). Dále un vistazo y me comentas.
    Espero tu ayuda con respecto a diseño. Podrías darle alas a tu imaginación y ver si puedes crear una más "profesional" en comparación con la actual?...
    La idea es que simule algo como un reproductor al estilo "Música Jpz" (siempre dejando un espacio para montar el Dewplayer y el listado de temas).

    Saludos Master y gracias por tus tutoriales.
    Jpz.-

    ResponderEliminar
  43. No te aseguro nada porque ahora ando corto de tiempo, pero si logro hacerme un espacio veo qué puedo hacer.

    Saludos!

    ResponderEliminar
  44. Gracias Potro.
    Obviamente, el tiempo es oro. Así que cuando puedas solamente.

    Gracias nuevamente.
    Saludos.
    Jpz.-

    ResponderEliminar
  45. Hola Jpz,

    A ver qué te parece este:
    http://i45.tinypic.com/erid13.png
    Abajo del display dejé el espacio para el reproductor, y la segunda parte es para poner la lista de canciones.
    Espero sea de tu agrado.

    Saludos.

    ResponderEliminar
  46. Hola! Llevo como tres horas buscando por varios foros cómo cambiar el fondo de mi blog y aunque ya he probado todos consejos habidos y por haber, no hay forma!!! No lo consigo!!! Mi blog es http://escrituralternativa.blogspot.com/

    Lo único que quiero hacer es añadir una imagen que tengo en http://lh4.ggpht.com/_jHFFrLTcxG4/Szp_RurzmqI/AAAAAAAABIA/Y1MvZDWzJP4/mar%20de%20letras.jpg

    NO quiero cambiar color, ni nada de nada. Sólo quiero añadir una imagen que se repita de forma fija en el blog, como fondo.

    Me podéis ayudar?? Estoy desesperada!!

    El código que tengo ahora mismo es:

    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    GRACIASSSSSSSS

    ResponderEliminar
  47. Hola Little Becky,

    Sustituye ese código por este:

    body {
    background: url(http://lh4.ggpht.com/_jHFFrLTcxG4/Szp_RurzmqI/AAAAAAAABIA/Y1MvZDWzJP4/mar%20de%20letras.jpg);
    background-attachment:fixed;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    Saludos!

    ResponderEliminar
  48. Muchas gracias!! Por fin funciona!! Lo malo es que he comprobado que con ese fondo no se ve nada el contenido del blog...he tuneado otra vez la foto de tal forma que las letras de la imagen sólo aparezcan por ambos laterales, pero no sé cómo hacer para que la imagen no se repita dos veces a lo ancho de la página...alguna sugerencia??

    ResponderEliminar
  49. Si quieres que la imagen sólo se repita hacia abajo entonces agrega en la línea del código de la imagen lo que está en negrita:

    background: url(http://lh4.ggpht.com/_jHFFrLTcxG4/Szp_RurzmqI/AAAAAAAABIA/Y1MvZDWzJP4/mar%20de%20letras.jpg) repeat-y;

    Si tienes alguna duda me comentas.
    Saludos.

    ResponderEliminar
  50. GraciasssssssS Al final lo que he hecho ha sido retocar la imagen para que el contenido del blog se vea mejor :) Qué guay encontrarte en este foro!!!!! Muchas graciassssS y Feliz Año Nuevooooooo

    BesosS

    ResponderEliminar
  51. Me alegro que hayas tenido los resultados esperados.
    Saludos y feliz año nuevo!!!

    ResponderEliminar
  52. Potro! No sé por qué pero de repente el fondo de mi blog ha desaparecido!!! Por más que vuelvo a poner la imagen en el código que me dijiste, no se ve!!! Te digo mi blog para que eches un vistazo:

    http://www.gotasdelcantabrico.blogspot.com/

    A ver si puedes decirme algo, porfa :)

    BesossS

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

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

    ResponderEliminar
  55. Actualizo mi pregunta:

    Todo está ok, el fondo se ve bien desde cualquier ordenador excepto el mío. Veo el fondo si abro el blog desde el Explorer, pero sólo se ve fondo blanco si abro el blog con el firefox...por qué no se ve el fondo rojo con el firefox????

    BesosS

    ResponderEliminar
  56. Potro.
    Excelente diseño. No esperaba menos de tu parte.
    Gracias por tu tiempo y disposición para mí.
    En un momento más lo implemento.

    Grande Potro!!!!.
    Saludos.
    Jpz.-

    ResponderEliminar
  57. ada, supongo que debe ser la versión de tu navegador, yo he entrado a tu blog tanto en Chrome, Explorer, Opera y Firefox y en todos se ve el fondo rojo sin problema alguno.

    Jpz, qué bueno que te gustó, ya pasé a tu blog y me ha gustado cómo se ve. Saludos.

    ResponderEliminar
  58. Y cuál versión debería instalarme? Las últimas??? En el explorer se ve guay pero en el firefox no...voy a trastear a ver qué pasa :)

    BesosS

    ResponderEliminar
  59. Supongo que la última, en la página de Firefox está la descarga de la última versión.

    Saludos.

    ResponderEliminar
  60. neta gracias muchas gracias me sirvio 100% venga saludos

    ResponderEliminar
  61. Me alegra que te haya servido ;)
    Saludos.

    ResponderEliminar
  62. Hola, espectaular estos datos, he experimentado todos los datos que has dado y funcionan a la perfeccion. Solo falta saber como hago para lograr que la imagen de fondo se mueva a medida que voy bajando. Gracias.

    ResponderEliminar
  63. Hola SanyS,

    Qué bueno que los códigos te estén dando los resultados esperados ;)
    Para que la imagen se mueva a medida que bajas o subes sólo elimina esta parte:

    background-attachment : fixed;

    Saludos.

    ResponderEliminar
  64. HOLA QUISIERA QUE ME AYUDARAS, HICE TODO EL PROCEDIMIENTO SEGUN TUS INDICACIONES PERO LA IMAGEN DE FONDO DEL BLOG ME APARECIO SOLO POR UN COSTADO Y EL OTRO ESTABA BLANCO Y LUEO TODO SE VOLVIO BLANCO Y NO SALE NADA ESTO ES LO K TENGO:

    body {
    margin: 0;
    text-align: center;
    min-width: 760px;
    background-image: url(http://img59.imageshack.us/img59/9025/amorb.gif)no-repeat top center;
    color: $textColor;
    font-size: small;

    ResponderEliminar
  65. Hola diego nueno,

    Necesitaría saber cuál es tu blog para conocer la estructura de tu plantilla.
    Así a simple vista por el código que mencionas sólo podría decirte que elimines el no-repeat top center pero bien esa podría no ser la solución.

    Saludos.

    ResponderEliminar
  66. esta es la direccion http://coleccion44.blogspot.com
    ojala me puedas ayudar

    gracias saludos.

    ResponderEliminar
  67. oh! bueno no me di cuenta que me diste una opcion y al ejecutarla salio bien por el momento no hay problemas

    gracias por tu ayuda XD

    ResponderEliminar
  68. Por nada diego, me alegro que ya esté funcionando.
    Saludos.

    ResponderEliminar
  69. hola potro!
    esta ves me surgio un problema que lo tengo hace mucho pero decidi recurrite a vos antes de que termine rompiendo la computadora :)
    hace mucho el fondo de mi blog se veia de relleno es decir expandido en la totalidad de la pantalla y ahora lo encuentro centrado :/
    http://demonastrus.blogspot.com

    esta es la plantilla para que me digas que ago mal :/.

    body {
    background:$bgcolor url(http://i47.tinypic.com/15yyhit.jpg) fixed no-repeat top center;
    ...
    }

    saludos y gracias!

    ResponderEliminar
  70. Hola Aferael,

    La imagen de fondo no se expande como tal sino que se repite, en este caso elimina donde dice no-repeat que está dentro del código que mencionas.

    Saludos.

    ResponderEliminar
  71. Hola Potro,

    He subido una imagen de fondo en mi página pero esta queda muy chica. Yo quisiera que abarcara toda la pantalla sin tener que usar repeat pues me quedan unas líneas que no me gustan en las orillas (el fondo no es un color sólido y por eso se ve así).

    Supongo que tiene que ver con el tamaño de la imagen que estoy utilizando pero no sé cómo hacerle para que abarque toda la página.

    saludos!

    http://perpetuarestauracion.blogspot.com/

    body {
    background:$bgcolor;
    margin:0;
    padding-left: 100px;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    background-color: #EBEAEC;
    background-image: url(http://i827.photobucket.com/albums/zz199/perpetuarestauracion/fondoperpetua2.gif);
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    border-color: #ffffff;
    border-width:0px ;
    border-style: solid;
    }

    ResponderEliminar
  72. Hola Norma García,

    Es difícil que puedas tener un ancho perfecto en una imagen que no se repite para el fondo de tu blog, la razón es que no todos los usuarios usan la misma resolución de pantalla o bien, el mismo ancho de ventana del navegador, por lo que si la ventana está chica se apreciará todo el fondo, pero si el usuario tiene la ventana más ancha y aparte un monitor más grande entonces se verá cortada la imagen.
    De cualquier modo si quieres intentarlo sólo busca en el código que has puesto esta parte:
    background-repeat: repeat;
    Y cambialo por esta otra:
    background-repeat: no-repeat;

    Con eso la imagen no se repetirá.
    Saludos.

    ResponderEliminar
  73. Hola q tal El Potro una vez mas Gracias por los grandiosos trucos d tu ciudad para los blog!!

    y pues tengo una duda, ya me quedo y funciono perfectamente ya lo probe en diferentes navegadores y computadoras con resoluciones diferentes, la duda mas q nada es q si se puede poner el Fondo Negro para cuando esta Cargando la pagina (es q se ve Blanco mientras carga el fondo y no se ve nada por q las letras son Gris)
    y como tiene q estar cargando cada q se entra a otra seccion se me hace algo tedioso no se... jaja

    es una simple duda si no se puede o algo asi no hay problema al fin q carga rapido en algunos casos bueno dependiendo d la conexion

    bueno t dejo la direccion d mi blog por fa
    http://rammsteinlinks.blogspot.com/

    Saludos y Gracias!

    ResponderEliminar
  74. Hola RammsteinLinks,

    Sí puedes ponerle un fondo de color, pero igual es recomendable que la imagen no esté muy pesada, pues entre más pesada esté más tadará en cargar.

    Sólo hay que agregar el código del color dentro de la misma línea, en este caso es color negro:

    background: #000000 url(URL de la imagen) no-repeat;

    Con eso tendrás el fondo negro y además la imagen.
    Saludos.

    ResponderEliminar
  75. Muchas gracias! me ah servido d mucho

    por cierto andaba en busca de como poner el efecto
    Lightbox y parece q me leiste la mente! jaja hace poco los colocaste jeje

    Saludos y Muuchas Graacias!

    ResponderEliminar
  76. Entonces procura no tener malos pensamientos que podré enterarme de ellos, jajaja.

    Saludos.

    ResponderEliminar
  77. Gracias Potro.

    Cambié mi fondo de blog por una imagen.

    El único problema que persiste es que no he podido dejar que la imagen se vea en cuando bajo con el scroll. Se ve cortad.
    No entendí bien eso de el último código. Qué se debe al respecto?
    Gracias por tus respuestas!!
    Pablo
    Te dejo mi dirección para que medigas que arreglar
    body {
    background:#2a2a2a url(http://www.tuswallpapersgratis.com/images/wallpapers/Uvas-1024x768-962046.jpeg) repeat-x 0 0;
    width:1000px;
    margin:0 auto 10px;
    font:normal 12px Arial,Verdana,Tahoma;
    color:#7b878f;

    ResponderEliminar
  78. Hola Pablo,

    Para que se repita la imagen y puedas verla aun cuando bajas el scroll elimina esta parte del código que acabas de mostrarme:

    repeat-x 0 0

    Saludos.

    ResponderEliminar
  79. Hola Potro.
    Gracias por éste fantástico blog.La verdad es que había buscado en otros sitios,soluciones a mis necesidades con mi blog,pero sólo aquí he visto que explicáis muy bien.Lo suficiente para que novatos cómo yo,que me acabo de hacer un blog por primera vez hace una semana aproximadamente,aprendamos mucho.
    Mi problema reside en que me estoy haciendo un blog de arte,y cómo artista,me gustaría mucho personalizar mi plantilla a mi gusto.La plantilla que tengo es la "Picture window",y me gustaría saber si se puede quitar el fondo semitransparente que queda detrás de todo el contenido del blog.Me interesa hacerlo transparente total,y que sólo se vea la imagen que quiero poner de fondo.
    Perdón por el ladrillo y gracias de antemano.
    Mi blog: http://ivanserranogarcia.blogspot.com/

    ResponderEliminar
  80. Perdón por éste post adicional.Pero he visto el blog que tiene el compañero de más arriba "RammsteinLinks",y mi idea es que mi blog quede más o menos igual que el suyo.
    Detrás de todo el contenido del blog,que se vea sólo la imagen de fondo.
    Gracias.

    ResponderEliminar
  81. Hola Ivan Serrano,

    Muchas gracias por tus comentarios, me da gusto saber que este blog te ha servido de ayuda para impulsar tu nuevo proyecto con ese blog que estás empezando.
    Entré a tu blog pero no vi la imagen semitransparente que mencionas, supongo que ya has sabido cómo quitarla.

    Saludos.

    ResponderEliminar
  82. Hola Potro.Gracias por la respuesta.Supongo que no has podido verlo porque estaba haciendo pruebas con un fondo negro y por éso no se veía lo que te comentaba.Ahora ya he cambiado otra vez el fondo a uno de Blogger,por si entras que puedas a que me refiero.
    Y lo que tampoco consigo es poner la imagen en grande o que ocupe todo el fondo cómo yo quiero.Estoy haciendo una con Photoshop en negro y amarillo,pero se queda pequeña aúnque la centre,y me gustaría que fuera más ancha que el contenido.
    Muchas gracias.

    ResponderEliminar
  83. Hola de nuevo Ivan,

    Entonces sólo busca esta parte y elimina lo que está en negrita:
    .content-outer {
    background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;

    Si vas a cambiar la imagen de fondo y la quieres de ese tamaño entonces te recomiendo que la hagas con las mismas medidas que la actual. La imagen de fondo que tienes es esta:
    http://themes.googleusercontent.com/image?id=1sbDCVdylfaB7TKeFHt378q5EKX7N0LZqrNn6Rj52PMX_6iCNiKeZmsuGc-TyI4VlelfT

    Saludos.

    ResponderEliminar
  84. Hola Potro.
    Muchas muchas muchísimas gracias por tu ayuda amigo.Eres muy grande.
    Todavía no he terminado de personalizar mi blog pero he probado las dos cosas y funcona perfecto.Ahora sólo quedan algunos rompecabezas que solucionar con Photoshop y ya estará.
    Bueno,la verdad es que al principio me he hecho un poco de lío,pues con lo del background transparente no salía exactamente así:

    .content-outer {
    background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;

    No estaba seguro de que fuera éso,pero no encontré en el código nada más parecido.Así que decidí borrar lo que había después de "background:" y poner sólo "transparent".Y voilá,se quedó perfecto.
    Con la imagen también he tenido que hacer algunos arreglos en Photoshop para que encaje en todo el fondo del blog y no se recorte,pero lo he solucionado.

    Muchas gracias maestro sin ti,no lo habría conseguido.

    ResponderEliminar
  85. De hecho el código lo saqué viendo el código fuente de tu plantilla, y estaba tal cual te lo puse en el comentario.
    Qué bueno que ya está solucionado ;)

    ResponderEliminar
  86. Hola Potro.Me está sirviendo de mucho tu ayuda.Te lo agradezco.Pero éstos de Blogger parece que diseñaron el sistema con bastantes limitaciones y no sé si hay cosas que se puedan personalizar.El problema que tengo ahora es que he puesto una imagen de fondo que me hace a la vez de cabecera,y queda muy bien junto con el menú de páginas justo debajo.El problema es que yo no tengo imagen de cabecera todo el fondo es el diseño,y claro sale por fuerza el título del blog encima y lo estropea todo.Además si pongo las letras del título pequeñas,el menú y las entradas se montan encima de lo que sería mi cabecera y lo estropea más si cabe.He tenido que poner una imagen de 2 píxeles de ancha recortada del fondo y estratégicamente puesta para que no se vea el título del blog y no se note que está ahí.Pero si tienes un monitor 16:9 cómo yo supongo que se ve bien,pero lo he probado en un 4:3 y se mueve la rayita de 2 pix.Mi pregunta es: Se puede dejar la cabecera sin imagen y que no se vea el título,pero mantener la distancia deseada con la parte de arriba del blog? http://ivanserranogarcia.blogspot.com/

    Pido perdón por los largos post que hago pero creo que me sería difícil explicar algo tan complicado con menos palabras.
    Muchas gracias de antemano,y gracias por lo que ya me has ayudado.

    ResponderEliminar
  87. Hola Ivan Serrano,

    Quien quiere hacerte difícil la vida no es Blogger sino que usas una plantilla que no es de Blogger así que los diseñadores de repente tienen que quitar o poner elementos que no son clásicos de las plantillas de Blogger y es cuando surgen esos problemas.

    Lo que puedes hacer es eliminar el título del blog para que no aparezca y no se te encime con nada que tengas detrás de él.

    Por lo largo de los comentarios no te preocupes, es mejor que se alargue un poco, siempre y cuando quede bien entendido :)

    ResponderEliminar
  88. Genial Potro! Ha funcionado perfecto! Muchas gracias.El código de mi plantilla es algo diferente y me ha costado un poco identificarlo,pero al final lo he logrado.Me estoy familiarizando con ésto del HTML,supongo.Ahora tengo que encontrar la forma de conseguir que el menú de páginas y las entradas me queden más abajo para que no se monten por encima de la imagen fondo,cómo lo tenía con la tipografía del título a un tamaño concreto.Voy a buscar a ver si encuentro una forma de separar el menú de la parte de arriba del blog por píxeles.Si supieras alguna forma te agradecería mucho que me la indicaras.Ciudad Blogger es grande,gracias por la ayuda.Cuando tenga mi blog terminado os reservo un sitio en mi lista de blogs,por supuesto.

    ResponderEliminar
  89. No veo que esté encimado, supongo que ya lo has de haber arreglado.
    Saludos.

    ResponderEliminar
  90. Hola Potro.No encontré en el código la forma de separar el menú de páginas de la parte superior del blog.Pero se me ocurrió modificarlo para poder añadir más gadgets a la cabecera y poner uno de texto.Entonces sin escribir nada,le he dado varias veces al intro hasta conseguir la distancia deseada,y ha quedado perfecto.

    Saludos.

    ResponderEliminar
  91. Vaya, bastante sencilla la solución ;)

    ResponderEliminar
  92. ay GRACIAAAAAAAAAASSSS!!! Por fin! Lei varios pero un simple detalle cambia todo! que barbaro... Bueno, por fin lo logré Muchisimas gracias por tu ayuda! Visita nuestro blog a ver q te parece! http://marialeyorquesta.blogspot.com
    BESOS Y MAS GRACIAS! XD

    ResponderEliminar
  93. Qué bueno que ya lo has solucionado :)
    Gracias por tu visita.

    ResponderEliminar
  94. y como puedo poner una foto de fondo desde mi equipo?

    ResponderEliminar
  95. Subela desde Blogger como si fueras a subir una foto en una entrada. Cuando suba verás en la pestaña Edición de HTML que aparecen unos códigos, esos son los códigos de la imagen que subiste de tu equipo, verás dos URL, usa la segunda para ponerla como fondo del blog.

    ResponderEliminar
  96. POTRO QUISIERA SABER COMO CAMBIAR EL COLOR DEL FONDO DE LAS ENTRADAS, NO DE TODO EL BLOG SINO SOLO EL COLOR DE LAS ENTRADAS

    ResponderEliminar
  97. Debajo de donde dice:
    .post {

    Puedes agregar un color de fondo, por ejemplo:
    background:#00FF00;

    ResponderEliminar
  98. POTRO ERES ON LOGO ¡MUCHAS GRACIAS!

    OTRA DUDA POTRO
    ¿QUE HAGO PARA QUE SIEMPRE APARESCA UN ICONO EN CADA COMENTARIO?

    ResponderEliminar
  99. Agrega esto en tu plantilla:

    .comment-author {
    background: url (URL del icono) left no-repeat;
    padding-left: 25px;
    }

    Saludos.

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

    ResponderEliminar
  101. En que parte exactamente se añade el codigo

    #comments {
    padding:0px;
    font-size:110%;
    font-weight:bold;
    }

    .comment-author {
    margin-top: 25px;
    }

    .comment-body {
    font-size:100%;
    font-weight:normal;
    color:#000000;
    }

    .comment-footer {
    padding-bottom:20px;
    color:$footercolor;
    font-size:80%;
    font-weight:normal;
    display:inline;
    margin-$endSide:10px
    }

    porque provee reemplandolo por .comment-author { y no sale, tambien lo puse debajo de .comment-author { y no sale, o el codigo va en otra parte o tengo que cambiar algo más, espero tu respuesta Potro

    ResponderEliminar
  102. En cualquier parte antes de ]]></b:skin> debe funcionar a menos que tengas una plantilla que no sea de Blogger y esté muy modificada, si ese es el caso entonces no podría decirte cómo agregarlo :(

    ResponderEliminar
  103. como le hago para repetir la imagen

    ResponderEliminar
  104. Tal como dice en la entrada, elimina lo que está negrita que dice no-repeat y la imagen se repetirá.

    ResponderEliminar
  105. Hola potro muchas gracias te felicito porque acertaste en el problema anterior disculpa que de mucha lata ,pero pues soy medio novato en esto . De nuevo te pregunto porque pues no encuentro respuesta mira quiero hacer un blog con un diseño pues muy parecido al blog:narutoshippudenspain.blogspot.com y vi que en su post estan con un fondo blanco ,mientras que en la sidebar tiene un fondo negro y lo demas el footer y header en gris y pues o lo intente hacer pero puse el color blanco ,pero mi plantila no maneja el post body entonces generaliza volviendo toda la pagina blanco ,salvo las imagenes ¿Hay manera de hacer algo?
    Porque pense en descargar la plantilla que ellos tienen con su creador blogandweb pero no la encontre .

    De antemano Gracias y disculpa las molestias

    ResponderEliminar
  106. Sólo es cuestión que apliques el color de fondo a las áreas que quieres.
    Si quieres agregárselo a la sidebar entonces será dentro de #sidebar-wrapper
    Si quieres agregárselo a las entradas entonces será dentro de #main-wrapper
    Si quieres agregárselo al footer entonces será dentro de #footer-wrapper

    Saludos.

    ResponderEliminar
  107. hallo
    pues ami se me traba u.u es triste quiero la imagen pero
    el blog no me lo agarra
    esto me sale en el blog

    body {
    font: $(body.font);
    color: $(body.text.color);

    y cuuando meto el http de la imagen no me la agarra
    q puedo hacer D=

    ResponderEliminar
  108. hola¡¡¡

    muy bn explicado pero el problema es que yo ya lo hice y no me sale no se en que me este equivocando..
    PRIMERO EN MI BLLOG APARECE ESTO
    background:$(body.background);
    DESPUES RETIRES ESTO
    $(body.background);
    Y DESPUES LE AGREGUE EL URL HACI:
    background:(http://3.bp.blogspot.com/_LFG1pDHjvE0/TEEIxetfx1I/AAAAAAAAAeg/3Gr1bOZX4eo/s1600/back-arriba.jpg)
    SOLO QUE EN MI BLOG SI APARECE JUNTO EL :Y EL URL.

    me pueden decir en que me equivoque

    ResponderEliminar
  109. kary y brenda lilian,

    En las plantillas nuevas de Blogger el procedimiento es otro. En esta entrada Oloblogger explica cómo hacerlo en las nuevas plantillas.

    Saludos.

    ResponderEliminar
  110. potro, como hago para q no se me repita a lo largo una imagen q puse d fondo del blog, ya que es casi imposible poner una imagen q tenga 3000px d largo, por decirte un numero inmenso... me gustaria q la imagen d fondo no se mueva y lo q baje y suba sea la parte central del contenido... por ej en: http://riverlate.com/ vas a ver q el fondo queda estatico... creo q tambien lo traen las nuevas plantillas predeterminadas d blogger...
    gracias...

    ResponderEliminar
  111. Para que se repita a lo largo sólo cambia donde dice no-repeat por repeat-y

    Para que el fondo no se mueva agrega lo que se indica en la entrada:
    background-attachment : fixed;

    ResponderEliminar
  112. listo ya lo pude hacer... x casualidad se puede hacer q al entrar en alguna parte especial del blog, ya sea por ej. una determinada etiqueta, la imagen de fondo vaya cambiando? en mi caso, tengo un blog de deportes y me gustaria, como tienen algunas paginas, que al ingresar en un determinado deporte (futbol, basket, boxeo, etc)la imagen de fondo vaya acorde al tema...
    probablemente sea imposible pero me gusta darte desafios... jaja...
    saludos...

    ResponderEliminar
  113. Sí es posible, mira esta entrada, habla acerca de los códigos condicionales, con ellos puedes hacer ese tipo de cambios.
    Casi al final de la entrada hay un ejemplo de cómo usarlos, en tu caso tendrías que poner dentro el atributo del color de fondo, en este caso:
    body {
    background: #000;
    }

    ResponderEliminar
  114. Hola tengo este body y no puedo cambiar cuando reemplazo backgound con la url que estare haciendo mal, sale siempre fondo blanco.

    Mi Body actual
    body {
    background:#123;
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:$mainTextColor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    URL dela foto

    http://picasaweb.google.com/lh/photo/gbuNPuJYOi_9JLEQFqQrGA?feat=directlink

    gracias !!!

    ResponderEliminar
  115. Esa URL es la dirección para ver la imagen en Picasa pero no es la URL directa de la foto.
    La URL que debes poner es esta:
    http://lh4.ggpht.com/_Arh9Cn11MiY/TKXLf0CLaSI/AAAAAAAAA98/C5pZrW92Sto/s800/img6.jpg

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

    ResponderEliminar
  117. Ay, Potro... pude cambiar el color de fondo (negro), pero solo en Chrome aparece el cambio... en explorer y firefox queda todo en blanco... por qué?

    ResponderEliminar
  118. esto es lo que tengo en el codigo body {
    background:#00000;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    ResponderEliminar
  119. Es que a tu código del color le falta un cero, debe ser #000000;

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

    ResponderEliminar
  121. amigo, seguí tu consejo y me funciono, pero con un problema, mi imagen aparece del lado izquierdo y del lado derecho me lo tapa una barra de algo que no deja ver el resto de la imagen...no se como solucionarlo, alguna respuesta??

    por favor agregame al mail y explícamelo por ahí que es mas cómodo, mil gracias!!

    aladerivarock@hotmail.com

    ResponderEliminar
  122. Todas las preguntas y respuestas se hacen únicamente por este medio.
    Necesitaría ver en cuál blog lo has puesto para darme una idea de qué pueda estar pasando.

    Saludos.

    ResponderEliminar
  123. hola potro:

    queria decirte que soy un poco ingnorante y no entendi como debo hacerlo...

    te gustaria ayudarme????

    esto es lo que me aparece:

    body {
    font: $(body.font);
    color: $(body.text.color);
    background: url(http://lh4.ggpht.com/_jHFFrLTcxG4/Szp_RurzmqI/AAAAAAAABIA/Y1MvZDWzJP4/mar%20de%20letras.jpg) no-repeat;
    background-attachment : fixed;

    }

    espero que puedas ayudarme
    de antemano
    gracias

    ResponderEliminar
  124. Así como lo has puesto está bien, el único problema es que la URL de la imagen que pusiste no existe.

    ResponderEliminar
  125. Olle mas o menos por donde se encuentra el codigo??

    Saludos.

    ResponderEliminar
  126. Al inicio de la plantilla, presiona las teclas CTRL + F y ahí escribe body {
    Así te será más fácil localizar el código.

    ResponderEliminar
  127. Muy buenas potro, me podrias decir como pongo una imagen de fondo en las entradas? (es decir del contenedor)

    El fondo de la pagina ya lo cambie y le puse una imagen pero no consigo cambiar el de donde esta lo que escribo y el trozo donde esta la cabecera.

    Mi blog es este: http://todominecraft.blogspot.com/

    y como te digo lo q quiero cambiar es el fondo blanco que llevo un rato y no lo consigo.

    Gracias de antemano y un saludo.

    ResponderEliminar
  128. Pues ahí dentro de .post { está bien, veo que ya lo has conseguido.

    ResponderEliminar
  129. Hola El Potro, no sabia donde poner esto...
    fijate en la cabecera de mi blog.detras de la cabecera se ve como verde, que es la cabecera predeterminada, llevo ya dos dias y no puedo quitarla :( como podría quitar eso verde ???
    Mi blog: http://argonauta-s.blogspot.com/

    ResponderEliminar
  130. Entra a Diseño y luego al Diseñador de plantillas, ahí selecciona la pestaña Avanzado y luego Fondos. En 'Fondo de la cabecera' puedes cambiar ese color de fondo verde que tienes actualmente.

    ResponderEliminar
  131. Muchas gracias El Potro, estuve mirando por hay pero no se me ocurrio mirar en Fondos ^^, espero que funcione, ya te diré...

    ResponderEliminar
  132. ...Funciona, Gracias El potro, te enlacare en mi blog :-)


    Muchas Gracias ;)

    ResponderEliminar
  133. Perdoname potro, me estoy volviendo loco.
    He creado otro blog. No sé si todo lo que aprendí lo he olvidado.
    Este nuevo blog es: http://epifanioquiros.blogspot.com/
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: url(http://i52.tinypic.com/2dirklk.jpg);
    padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
    $(body.background.override)
    }

    Quiero cambiar el fondo por una imagen y he seguido tus pasos pero sólo se ve por detrás y quiero conseguir el mismo efecto que en este otro blog que tengo: http://iesyfol.blogspot.com/
    Pero en el nuevo el cuerpo del blog y la cabecera no tienen el fondo elegido,. ¿Qué hago mal o que no hago que debería hacer?
    Gracias.

    ResponderEliminar
  134. Lo que sucede es que esas plantillas son distintas entre ellas por lo que sus procedimientos son distintos.
    En el caso de la que quieres cambiar verás que dentro del área de:
    .body-fauxcolumn-outer .cap-top {

    También hay un background que es el que se muestra en la parte superior. Sólo eliminalo y deberá solucionarse el problema.
    Pero ojo, eso sólo cambiará el fondo de la estructura del blog. Si deseas eliminar todos los fondos deberás hacerlo desde el Diseñador de plantillas, en la pestaña Avanzado se pueden cambiar esos colores por 'transparente'.

    Saludos.

    ResponderEliminar
  135. Gracias Potro, me estaba volviendo loco. Funciona perfectamente. Ahora intentaré quitar el contorno al cuerpo central y seguir confeccionándolo.
    Gracias, de nuevo por tu generosidad y amabilidad.

    ResponderEliminar
  136. demonios porque no puedo cambiarlo? hice todo q esta ahi, cambie el url de la imagen y no sale nadaa, ayudamee!

    ResponderEliminar
  137. o.o olvidalooo, sin hacer nada me ayudaste, es solo q creo estar ciega y obvie unas cosa jajaja pero graciias

    ResponderEliminar
  138. Qué bueno que ya lo has resuelto :)

    ResponderEliminar
  139. hola potro tengo una plantilla sencilla del diseñador de plantillas y sabes que no encuentro el codigo que tu marcas. probé buscarlo pero no logro, lño unico que quiero es cambiarle el fondo por un color solido
    abrazo, muchas gracias y sos el uno viejo

    ResponderEliminar
  140. eso es lo que me aparece

    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    html body .content-outer {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    }

    a:link {
    text-decoration: none;
    color: $(link.color);
    }

    a:visited {
    text-decoration: none;
    color: $(link.visited.color);
    }

    a:hover {
    text-decoration: underline;
    color: $(link.hover.color);
    }

    .body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: 1;

    height: 276px;
    width: 100%;

    background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
    _background-image: none;
    }

    ResponderEliminar
  141. Sólo elimina lo que está en negrita y en lugar pon el código del color que deseas:

    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    ¡Saludos!

    ResponderEliminar
  142. Hola Potro,
    Que tal estas?.
    Tengo una duda referente al encuadre de las fotos. Como no he visto otro post mas parecido, lo pongo aqui. Como puedo ponerle un borde (blanco o negro a una foto?).A veces he visto tambien una linea negra que encuadra ese borde.
    Creo que hay plantillas que te permiten hacer esto desde el panel de control en Diseño (Diseñador de Plantillas), pero en mi plantilla no tengo esa posibilidad...
    Muchas Gracias
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  143. Hola Jose,

    Si quieres que sólo unas cuantas imágenes tengan el borde entonces dentro del código de cada imagen agrega esto:

    style="border:10px solid #000"

    Si quieres que todas las imágenes de las entradas tengan ese borde entonces busca esta línea:
    .post h3 {

    Justo arriba de ella agrega esto:
    .post img {border:10px solid #000}

    El 10px es el ancho del borde, y el #000 es el color.
    Saludos.

    ResponderEliminar
  144. Hola Potro,
    Gracias por tu comentario.
    Quizas estoy haciendo algo mal.! El borde me aparece pero sus dimensiones son mayores que el borde de la foto. No consigo que el borde negro quede exactamente ajustado al borde de la foto. En el codigo de la imagen me aparece esto : style="clear:both;
    Cuando dices agregar: En que lado exatamente lo agrego?>. No se trata de sustituir un style por otro, verdad?>..
    Me gusta mas la idea de ponerle el borde solo a unas cuantas fotos!..
    Muchas Gracias Potro por tu ayuda.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  145. Hola Jose,

    Si el código de la imagen ya tiene un style entonces no necesitas agregar otro sólo incluir dentro el código del borde que en este caso sólo sería:
    border:10px solid #000;

    Ponlo como lo has hecho y déjalo así, luego me dices la entrada donde lo has puesto para que pueda ver bien el problema con tienes con ello.

    Saludos.

    ResponderEliminar
  146. Hola Potro,
    He mandado un email a la pagina principal de contacto. Perdona por usar ese medio, pero debe ser que algo va mal con mi ordenador; me daba este mensaje: Su HTM no es aceptable: Etiqueta no permitida: DIV. Espero que sea algo pasajero.
    Un saludo y muchas gracias.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  147. Hola José,

    Ya te he respondido el correo.
    Saludos!

    ResponderEliminar
  148. Muchas Gracias Potro.
    Ha salido a las mil maravillas!.. Ahora estoy todo el rato cambiando los bordes a distintos colores. Me olvide preguntarte otra cosita mas y perdona la tabarra!.. Es posible tener dos bordes?. Me explico: En ocasiones he visto fotos con un borde blanco de unos 10px y luego a este borde le rodea otro borde finisimo de color negro que lo enmarca.
    Ah! Gracias por el convertidor de HTML. No tenia ni ide de eso!..
    Muchisimas gracias por pulirnos cada dia un poco mas y sacar lo mejor que hay en nosotros.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  149. Pues puedes probar los diferentes estilos de borde que hay, por ejemplo, el código del borde que te di es así:

    border:10px solid #000;

    Cambia ese solid por uno de estos:

    dotted
    dashed
    double
    groove
    ridge
    inset
    outset

    ResponderEliminar
  150. Hola Potro,
    Me las anoto todas!..
    Muchisimas gracias
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  151. en el mio lo único que dice de body background es esto:



    background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
    _background-image: none;



    y lo intenté pero no pude....

    ResponderEliminar
  152. Hola! Yo intenté agregarle una imagen al outer-wrapper, pero me está funcionando en Chrome y en Firefox. En el Explorer no se ve la imagen. Habrá algún detalle para mejorar desde el código? O ya es problema del navegador?
    http://www.nikojackson.com.ar

    ResponderEliminar
  153. Hola Manu,

    En Internet Explorer a veces hay que ser más específicos con las declaraciones de los atributos, o mejor dicho, hacerlas por separado.
    Prueba ponerlo así:

    background-image: url(http://i1213.photobucket.com/albums/cc473/manudp77/spotlight.jpg);
    background-repeat: no-repeat;

    ResponderEliminar
  154. Maldito Explorer. Ahora funcionó. Mil gracias. Ahí va "donación" para ti :P

    ResponderEliminar
  155. Qué bien que resultó el truquillo ;)

    ResponderEliminar
  156. Hola Potro una preguntilla porque no tengo ni idea y si no es porque me lo dicen ni idea tenía tampoco. Bueno, resulta que en este blog http://elclubdemisamores-meri.blogspot.com/ si se ve con IE el fondo se ve blanco, no tenía ni idea porque IE no lo utilizo ¿Qué puedo hacer?
    Saludos

    ResponderEliminar
  157. Hola Meri,

    Prueba cambiando esto:
    background:#112233 url(http://3.bp.blogspot.com/-NqE6zJiipzQ/Tk-ziH9YC1I/AAAAAAAAJcY/PVXv4x1EXlQ/s1600/94.jpg)fixed no-repeat top left;

    Por esto:
    background-color:#112233;
    background-image: url(http://3.bp.blogspot.com/-NqE6zJiipzQ/Tk-ziH9YC1I/AAAAAAAAJcY/PVXv4x1EXlQ/s1600/94.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;

    ResponderEliminar
  158. Problema resuelto
    Muchísimas gracias Potro ¡no se que haría sin tí!

    Saludos

    ResponderEliminar
  159. Qué bueno que pudo resolverse Meri, buen inicio de semana!

    ResponderEliminar
  160. Yo tengo esto en pantalla:
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: ;

    ResponderEliminar
  161. hola . quiero saber como se hace para dejar el blogger totalmente negro ,Sin una platilla y solamente con el fondo negro ,Porque no hay ninguna plantilla que sea negra entonces se la quiero sacar pero noce como

    ResponderEliminar
  162. hola yo no lo puedo encontrar me dice mas o menos donde esta?
    gracias

    ResponderEliminar
  163. Milagros Arami, ese background: ; es el que debes cambiar por lo que se indica en la entrada.

    ResponderEliminar
  164. Ceeles, ¿te refieres a que el blog no tenga absolutamente nada de nada?
    Entonces elimina todos los códigos de tu plantilla (todo, todo), y en su lugar pon esto:

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <b:skin>
    body {background:#000;}
    </b:skin>
    </head>
    <body>
    </body>
    </html>

    Pero ojo, eso hará que el blog ya no tenga nada, ni entradas, ni gadgets, nada.

    ResponderEliminar
  165. Nahuel, al inicio de la plantilla, igual puedes usar las teclas CTRL + F para localizar los códigos más fácil.

    ResponderEliminar
  166. Hola quería saber si es posible mantener el body blanco y que el header quede transparente para poder apoyarlo directamente sobre un fondo que yo coloqué. saludos!

    ResponderEliminar
  167. Puedes poner el body blanco poniendo sólo el color de fondo blanco:
    background: #fff;

    Y el header sólo localiza esta área y elimina lo que está en negrita:
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;

    }

    De esa forma el header no tendrá un color de fondo.

    ResponderEliminar
  168. Hola Potro!, gracias por tu pronta respuesta. No me funcionó. Será porque tengo una plantilla sensilla? yo quiero lograr algo como esto http://www.soyrecesionista.com.ar/

    saludos
    Romi

    ResponderEliminar
  169. Hola Potro!, ahora si pude hacerlo...nose bien como jajajaja. gracias!

    ResponderEliminar
  170. Seguro algún caracter habías puesto mal o algo parecido. Qué bueno que ya está resuelto :)

    ResponderEliminar
  171. Ahora lo que no logro corregir es el espacio que quedo al quitar la navbar, hice lo que pusiste en el post relacionado a esto pero no lo corrige, aparece escrito ese código en el blog (mypartyboxblog.com)

    ResponderEliminar
  172. listo, lo solucioné!!! no voy a decir cual era mi error porque me van a cargar.... jiji
    gracias por todo!!

    ResponderEliminar
  173. No te preocupes, aquí no regañamos a nadie ;)

    ResponderEliminar
  174. grasias me funsiono yase canbiarle el fondo grasias

    ResponderEliminar
  175. Hola Potro! como estas? al final me cambie a una plantilla mínima y comencé todo otra vez. Y ahora si que no puedo borrar el fondo blanco del header. Yo quiero que el blanco comience luego del menú, es decir que el menú y el header queden apoyados sobre el fondo cuadrille. Y tampoco se como poner un margen más amplio a la izquierdea entre el blanco y el post. Te dejo el link de mi blog para que veas. Saludos y muchas gracias! www.mypartyboxblog.com

    ResponderEliminar
  176. Hola mypartybox,

    Modificando el color de fondo de la cabecera no te serviría pues no cubriría el menú ya que éste ya no es parte de la cabecera, y tampoco cubriría los lados de la misma.
    Lo que podría ser más conveniente es que apliques una imagen al #outer-wrapper, de esa forma la imagen cubriría toda la parte superior que quieres y lo demás no.
    Sólo tienes que cambiar el background que está en #outer-wrapper por esto:
    background: #FFFFFF url(URL de la imagen) repeat-x;

    Toma en cuenta que la imagen sólo debe ser de la altura que quieres que cubra la parte superior de la plantilla, el resto donde no se verá la imagen seguirá viéndose el fondo blanco.

    ResponderEliminar
  177. Gracias !! funcionó genial, cuando quieras date una vuelta por el blog, cada día corrijo más cosas gracias a tus post!

    ResponderEliminar
  178. Qué gusto que todo esté saliendo bien :)

    ResponderEliminar
  179. ¿Cómo podría hacer para utilizar una imagen como fondo que se redimensione automáticamente dependiendo de la resolución del monitor?

    ResponderEliminar
  180. Ninguna imagen se redimensiona según la resolución, debe ser una imagen de un tamaño fijo que no se repita, o una imagen pequeña que se repita como patrón.

    ResponderEliminar
  181. Ok, gracias. Otra pregunta, en lo que sería el cuerpo del blog, en mi caso es blanco, pero arriba del todo hay un pequeño degradado celeste ¿cómo lo quito?

    ResponderEliminar
  182. Recuérdame cuál blog es porque nunca me los memorizo :(

    ResponderEliminar
  183. Busca esta parte y elimina lo que está en negrita:

    .content-fauxcolumns .fauxcolumn-inner {
    background: $(content.background.color) $(content.background.gradient) repeat-x scroll top left ;
    border-left: 1px solid $(body.border.color);
    border-right: 1px solid $(body.border.color);
    }

    ResponderEliminar
  184. Hola el potro me has servido de mucha ayuda,pero tengo un problema que no se cual es el motivo,hice exactamente lo que decis,aloje la foto en Dropbox y le agregue la foto al blog,ahora hay veces que no se ve el fondo de la foto solo cuando abro el Dropbox ahí me lo activa y en explore no se ve de ninguna manera,no se si hice algo mal o me podes orientar ya que estoy tratando de mejorar el blog,desde ya muchas gracias y saludos

    ResponderEliminar
  185. Hola,

    Lo que sucede es que no has subido la imagen correctamente. Debes meterla dentro de la carpeta Public, de esa manera estará accesible siempre.

    Saludos.

    ResponderEliminar
  186. Que genio!!!!! muchas gracias resolví ese problema,tengo una duda pero no se si va con este tema,en explore cuando van en busca de la pestañas y le das clic a unas de las entradas el fondo de la entrada se pone negra( no el fondo de la foto)y después se pone normal,no se si me explico,yo uso chrome y se ve bien,tenes alguna idea de esto,muchas gracias una vez mas.
    saludos

    ResponderEliminar
  187. Ese navegador (Internet Explorer) es muy lento, y es "normal" para ese navegador que las cosas no carguen a tiempo, tal como el caso que explicas, no carga el fondo a tiempo y hasta que termina de hacer lo demás carga la imagen (o el color) de fondo.

    ResponderEliminar
  188. Saludos Potro en las nuevas plantilla bloggers ¿como dejo la imagen fija? te pongo el trozo de código para que me comentes que tengo que modificar para que se me quede fija la imagen de fondo de una vez:



    Gracias anticipadas por tu atención

    ResponderEliminar
  189. Es de igual forma guillemaro, ¿ya probaste usando el código de la entrada?

    ResponderEliminar
  190. Hola Francmi08,

    Busca esta parte en tu plantilla y elimina lo que está en negrita:

    .date-outer {
    position: relative;
    margin: $(date.space) 0 20px;
    padding: 0 15px;

    background-color: $(post.background.color);
    border: 1px solid $(post.border.color);

    -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
    box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);


    Con eso se quedará sin fondo el área de las entradas.
    Saludos.

    ResponderEliminar
  191. Es mismo es lo que quería preguntar yo. Pero parece ser que no soy la única que tiene el problema!

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger