miércoles, octubre 04, 2006

PONER UNA IMAGEN COMO FONDO

Si queremos establecer una imagen, ya sea personalizada o un wallpaper que nos gusta el procedimiento es bien sencillo. Lo primero que debemos hacer es subir la imagen a Blogger. Para ello nos dirigimos a crear una nueva entrada y ahí subimos la imagen como si fuese para un nuevo post. Del código htlm resultante sólo necesitamos la dirección URL:


Copiada la dirección en un documento vamos a la plantilla. Localizamos ésta parte:


Colocaremos la dirección URL después de background, entre paréntisis y precedida por el código "url". El porcentaje que aparece después de la dirección sirve para centrar la imagen a nuestro gusto. En mi caso le puse un 77% para hacerla coincidir con la cabecera, pero para que esté bien al centro debe ponerse un 50%. El "0" indica el margen que queremos dejar desde arriba... eso también podeis ponerlo a vuestro gusto.

34 comentarios:

xOsse dijo...

por lo que parece la imagen no se ve igual en todos los PC. En mi PC aparece la imagen bien centrada, mientras que en el portatil, que tiene una pantalla más pequeña, no. Espero solucionarlo pronto para comentaros como se hace.

Perezoso dijo...

Podrías realizar un tutorial sobre como has diseñado el tema de tu blog. Esta mu chulo.

xOsse dijo...

Todo lo que fui haciendo en éste blog lo fui explicando. Pincha en tutoriales y lo encontrarás todo.

ShäQ32 dijo...

no se que ocurre que a mí me sale un fondo blanco en lugar del que quiero y no me he saltado ningún paso, creo.

Devil dijo...

A mí tambien me queda el fondo en blanco. Será porque la imagen es muy grande?

Anónimo dijo...

no me sirvio la wea chanta

mIssRocK dijo...

es os pasa porque habeis borrado el color del fondo que venia despues de background....yo no lo borre...y segui estos pasos...y no ha cambiado nada...sige igual

:S

porque no cambia ?¿?

xOsse dijo...

Este truco solo funciona en la vieja versión de Blogger... como de esos ya no deben quedar, para introducir una imagen en la plantilla lo mejor es subirla a algún servidor o web. Yo utilizo Google pages, va muy bien... os lo recomiendo

MxFx dijo...

muy bueno el tutorial me funciono perfecto, solo q me parecio mejor subir la foto a otro host, tinypic.com

FGS dijo...

Hola, que tal?, Probé ésto en mi blog subiendo la imágen a Googlepages, y me funciona muy bien con Firefox y Opera, pero con IE no, no se vé la imágen, se vé el fondo blanco. Alguna idea de como podría resolver ésto?.

>>OrLaN X dijo...

Hola amigo.. oye tengo una duda...
no se si puedas ayudarme... yo ya he cambiado el fondo de mi blog, pero.. el area de los post se volvio transparente (sin fondo, por lo tanto el texto no se distingue bn)... y quiero que quede de un color negro tranparente... es decir que el fondo se aprecie pero las letras tambien... algo asi como este blog http://vampyloveskylie.blogspot.com .. crees que puedas ayudarme??...
gracias de antemano por darte el tiempo de leer este comentario...
saludos...
OrLaN X

xOsse dijo...

Bien. Lo que hace el autor del blog LOVE KYLY es insertar tanto en la barra lateral (sidebar) como en el cuerpo (main) una imagen transparente. Si o quieres puedes usar su propia imagen (es la que figura con una dirección web). Añade en el código fuente de tu blog tanto en main como en sidebar lo siguiente:

background-image:url(http://i175.photobucket.com/albums/w130/vamsuli/back-1.png);

Espero que te sea útil. Un saludo!

Portavoz de los muertos dijo...

Hola, me gusto tu blog, necesito ayuda con el mio ya que le quiero poner una fondo fijo, que cuando bajes la barra no se baje la imagen.
Me puedes ayudar
http://paintitblackorwhite.blogspot.com/

VIANKA dijo...

NO PUEOD HACERLO QUE ALGUIEN EM AYUDEEEE

RANN+ dijo...

Me fue de mucha utilidad, lo voy a hacer en alguno de los blogs.
Te hago un click en el Ads como agradecimiento. Ja!
Saludos

juLS dijo...

SALUDOS, PUES GRACIAS POR EL TUTORIAL
ME SIRVIO EN LA PARTE DEL COLOR DEL FONDO PERO NO PUEDO PONER LA IMAGEN DE FONDO, ME HARIAS EL FAVOR DE HACERLO POR MI?
PUES SE QUE NO SOY NADIE PARA QUITARTE TU TIEMPO
PERO
!!!POOOR FAVOOOR¡¡¡

ME LOCALIZAS AQUI

serverus-1422@hotmail.com

y este es mi blog

http://animedajuls01.blogspot.com/

juLS dijo...

Y NO C SI TENGAS OTRO TUTORIAL PARA CAMBIAR EL COLOR DE LAS LETRAS?

conchita dijo...

Estoy intentando cambiar el fondo de mi blog siguiendo los pasos que dices y nos es posible, no se que hago mal.
Estoy usando de bas al plantilla Ms. moto, pero antes también lo he intentado con la simple y nada de nada. Que puede ocurrir? Gracias

• Nicole ! dijo...

yo actualizo mi blog, hice todo eso y no se ve la imag de fondo; me qedo asi:

body {
margin-top: 0px;
margin-$endSide: 0px;
margin-bottom: 0px;
margin-$startSide: 0px;
background: fixed url("http://img212.imageshack.us/my.php?image=1161kgkl2.gif");
background-position: 50% 31px;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}

xOsse dijo...

# Nicole: puede que el problema sea del servidor en el que está alojada la imagen. He copiado la url y la puse en mi navegador y la imagen no aparece de forma directa, para verla es necesario hacer otro clic. Eso el sistema no lo va hacer.

Yo la subiría directamente a blogger y la dejaría en una entrada como borrador. Prueba a hacerlo así, como se explica en el post.

Sniper dijo...

hola. el tutorial esta bueno pero queria saber si la imagen que voy a colocar debe tener un tamaño especifico en pixeles o no es necesario.
GRACIAS DE ANTEMANO

xOsse dorrío dijo...

eso tendrás que hacerlo a tu gusto. Lo que si debes tener en cuenta es que cuantos más pixeles más lenta será la navegación de tu blog.

Sniper dijo...

xOsse dorrío. Gracias por tu ayuda. pero al subir la imagen y actualizar me sale en blanco (parece ser un error común, digo por algunos comentarios anteriores)
el codigo me quedó asi:
body {
background: fixed url ("http://4.bp.blogspot.com/_9eNy0HQGkLs/SawduvG_SiI/AAAAAAAAABk/jLqgXHKfIME/s320/Logo+elim+publimax.jpg");
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}

GRACCIAS POR TU RESPUESTA. :)

xOsse dorrio dijo...

al utilizar una imagen subida en blogger suele dar problemas. En el código HTLM de la imagen aparecen dos direcciones, prueba con las dos y si no funciona utiliza google pages o google site para cargar la imagen.

Alex Iturriaga - Director de Arte dijo...

Hola, antes que todo buen tuto, pero se me presenta un problema al probar con la imagen de fondo, y es que se me ve como mosaico, como hago para que se vea grande y no varias pequeñas???

xOsse dijo...

Para que una imagen no se reita debes añadir o sobrescribir esta línea:
background-repeat: no-repeat;

Alex Iturriaga - Director de Arte dijo...

Gracias por responder, lo hice y me resulto, ahora me keda creo k un ultimo problema, y es k la imagen se me sigue viendo pekeña, osea no cubre toda la pantalla, como arrelgo eso???

cyn dijo...

me funciono perfecto, gracias!

Cloud Chafatodo dijo...

Hola, tenía el mismo problema que "Alex Iturriaga - Director de Arte", hice lo que dijiste, aunque me sale la imagen arriba y luego todo blanco T.T

¿Cómo hago para que la imagen se quede allí y que sólo se deslice el texto (las entradas) cuando bajas la barra esa?

Agustin dijo...

LA VERDAD QUE TRATO DE TODAS FORMAS Y NO PUEDO, EL FONDO SIEMPRE QUEDA EN BLANCO. POR FAVOR AYUDENME.

KaRoL ScAnDiu dijo...

Muxas grax me ha ayudado muxo... además cambie varias imagenes predeterminadas de mi plantilla y quedo muy chulo... pasate y hecha un vistazo si puedes.... Saludos....

http://tedoymialma.blogspot.com/

miss_kaulitz dijo...

ola oie disculpa he tratado d todas las maneras y m qda en blanco ayudame plizz

angy duque dijo...

no ja oiga ps como sera eso
si ni cambia el color
no cambia
naaa
ami no me funciona naa solo la foto
y ya y eso q pequeña :(

AnGy dijo...

noo eso no funciona jam
cmo sera eso
ni si kiera cambia naa no jum
asi o mas maloo