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 Diseño->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:
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.
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.
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
113 comentarios:
wow excelente tip, muchas gracias!!!!!
hey gracias por lo del width ya q no me quedaba la imagen al tamaño y no sabia porque :S
gracias de nuevo
Hola JOSH_ONE, a tus ordenes. Saludos.
Hola eurogirl, un placer ayudarte.
Saludos.
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....
Hola antonio blog,
Qué bueno que te sirvió. Muchas gracias por el enlace =)
Saludos.
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.
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.
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
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.
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;
}
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.
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???
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.
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:
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.
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! =)
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.
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;
}
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.
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;
}
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.
amigo potro:
al colocar no-repeat el fondo se torno blanco, a que se debe eso? no habra otro codigo.
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.
amigo potro ese es:
http://hhonores.blogspot.com/
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
a disculpame te lo enviare con el fondo en este momento.
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.
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.
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.
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.
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.
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
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.
que dimension en centimetros debe tener la imagen para que pueda calzar exactamente?
Si sabes escribeme.
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.
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
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.
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;
}
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!
gracias amigo se ve de lujo... y del tutorial, ni que decir.. esta chido 100% compronsible..
Gracias por tus comentarios.
Saludos!
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.-
No te aseguro nada porque ahora ando corto de tiempo, pero si logro hacerme un espacio veo qué puedo hacer.
Saludos!
Gracias Potro.
Obviamente, el tiempo es oro. Así que cuando puedas solamente.
Gracias nuevamente.
Saludos.
Jpz.-
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.
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
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!
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??
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.
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
Me alegro que hayas tenido los resultados esperados.
Saludos y feliz año nuevo!!!
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
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
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.-
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.
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
Supongo que la última, en la página de Firefox está la descarga de la última versión.
Saludos.
neta gracias muchas gracias me sirvio 100% venga saludos
Me alegra que te haya servido ;)
Saludos.
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.
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.
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;
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.
esta es la direccion http://coleccion44.blogspot.com
ojala me puedas ayudar
gracias saludos.
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
Por nada diego, me alegro que ya esté funcionando.
Saludos.
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!
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.
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;
}
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.
Muchas gracias Potro!
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!
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.
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!
Entonces procura no tener malos pensamientos que podré enterarme de ellos, jajaja.
Saludos.
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;
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.
Gracias Master
Solucioné el problema..
Pablo
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/
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.
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.
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.
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.
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.
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 ;)
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.
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 :)
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.
No veo que esté encimado, supongo que ya lo has de haber arreglado.
Saludos.
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.
Vaya, bastante sencilla la solución ;)
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
Qué bueno que ya lo has solucionado :)
Gracias por tu visita.
y como puedo poner una foto de fondo desde mi equipo?
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.
POTRO QUISIERA SABER COMO CAMBIAR EL COLOR DEL FONDO DE LAS ENTRADAS, NO DE TODO EL BLOG SINO SOLO EL COLOR DE LAS ENTRADAS
Debajo de donde dice:
.post {
Puedes agregar un color de fondo, por ejemplo:
background:#00FF00;
POTRO ERES ON LOGO ¡MUCHAS GRACIAS!
OTRA DUDA POTRO
¿QUE HAGO PARA QUE SIEMPRE APARESCA UN ICONO EN CADA COMENTARIO?
Agrega esto en tu plantilla:
.comment-author {
background: url (URL del icono) left no-repeat;
padding-left: 25px;
}
Saludos.
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
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 :(
como le hago para repetir la imagen
Tal como dice en la entrada, elimina lo que está negrita que dice no-repeat y la imagen se repetirá.
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
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.
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=
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
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.
thanks :D
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.