Fondos en un blog hay muchos, todos los background que veas en tu plantilla son, en realidad, fondos.
As??, hay un fondo en la cabecera, otro en la zona de las entradas, main, otro en la columna lateral, sidebar, e incluso puede haber uno al pie del blog, footer. Todos ellos los iremos viendo cuando explique cada una de estas zonas.
En algunas plantillas, como la m??nima, hay un solo fondo para todo el blog, ya sea blanco, o negro, como en la m??nima black.
Pero ya sea solo uno o varios, hay un fondo que es al que me refiero en el t??tulo como el fondo de todos los fondos y este se encuentra al principio de todo del c??digo, justo bajo las variables, en body.
Body en ingl??s significa cuerpo, por eso se llama as?? a esa zona, ya que es donde se superponen todas las dem??s zonas que compondr??n el blog.
Hay plantillas, como la harbor, que no tienen un background definido en un solo sitio, sin?? en varios y la imagen final del blog la componen varias im??genes repartidas en varias zonas.
Pero incluso ??sta dispone de un body en el que tambi??n hay un background.
Algunos modelos tienen una url en la linea del background de body.
En ocasiones, como en la scribe, esta imagen es la que se ve de fondo del blog, en otras, como en la harbor, esta imagen est?? abajo de todo.
Habitualmente en ese body hay un color, que es el que se ver?? si la imagen que contiene, caso de haberla, no se viera por alg??n motivo.
As?? que si quieres personalizar tu blog cambi??ndole el fondo de todos los fondos, lo primero que has de hacer es averiguar qu?? modelo de plantilla usas y mirar qu?? hay en body.
Si solo pone background:#fff; o background:$bgcolor; o algo parecido, es que tu plantilla, en ese fondo, solo tiene un color liso.
En este caso, ponerle una imagen de fondo es tan sencillo como a??adir, tras lo que hay, pero antes del punto y coma que finaliza la l??nea y dejando un espacio detr??s del color, url(«———-«) poniendo, entre esas comillas, la direcci??n de la imagen que vayas a poner de fondo en lugar de esas l??neas que he colocado yo.
Si en ese background adem??s del color ya hay este c??digo con una direcci??n, es suficiente con poner la de tu imagen en lugar de la que haya, pero asegur??ndote, mediante la vista previa, que tu imagen reemplaza la que hay. Ya te digo que en la harbor, si lo hicieras, solo ver??as tu imagen abajo de todo a la derecha.
Te digo que has de poner una direcci??n, porqu?? esa es una condici??n ineludible para que puedas ponerle un fondo: la imagen ha de estar en alg??n sitio de internet, ya sea un servidor propio, como imageshack o tinypic, o cualquier otro de este estilo, o en tu album de Picasa.
He hecho varias entradas explicando como subir im??genes a los distintos sitios que le dan una url, pero como dichas entradas est??n desperdigadas en varios de mis blogs, har?? una explicando todos los sistemas a la vez, uno a uno, en forma m??s resumida, en este blog.
Bien, ya tienes la imagen colocada en el fondo, pero ??como es esa imagen y como quieres que se vea?
Si la imagen que has puesto es peque??a, se ha de repetir a lo largo y ancho del fondo, de lo contrario solo se ver??a arriba de todo a la izquierda.
En este caso lo ideal es poner una imagen que, al repetirse, de sensaci??n de continuidad, no de alicatado. Aqu?? puedes ver un ejemplo de continuidad pues, aunque la imagen que hay son unos ladrillos que forman una pared, no se ve donde acaba cada cuadrito que forma esta imagen.
Y aqu?? puedes ver un ejemplo de lo que he denominado alicatado.
Como podr??s comprobar, en este caso se ve perfectamente donde empieza y acaba cada cuadro que forma este fondo y, como puedes ver, queda muy mal.
Si solo pones lo que he dicho, url(«direcci??n»), la imagen se repetir?? sola.
Pero quiz?? quieres poner una imagen grande que abarque todo el fondo.
En este caso has de a??adirle algunas ??rdenes a este c??digo.
Le has decir como se va a ver y lo l??gico es que se vea desde arriba de todo y centrada, as?? que tras el par??ntesis de cierre de la direcci??n, dejando siempre un espacio entre cada orden, has de a??adir center top
Tambi??n le has de decir que no la repita, a??adiendo no-repeat
Un inciso en este caso: Ten cuidado con las im??genes grandes.
No todas las pantallas son iguales y lo que tu puedas estar viendo no ha de ser necesariamente lo que vean los dem??s.
As??, si tu pantalla es de 17″ (pulgadas) tendr?? poco m??s de 1200 pixels de resoluci??n, con lo que una imagen que tengas en tu pc de esta medida de ancho, abarcar?? toda tu pantalla.
Pero si quien est?? viendo tu blog dispone de una pantalla de 22″, tiene una resoluci??n de 1660 pixels, con lo que, si mira tu blog a toda pantalla ver?? una zona sin imagen a ambos lados del fondo.
En este caso, el color del fondo del blog ha de ser una tonalidad que no desentone con la imagen.
Si, por ejemplo, quieres poner una imagen de un bosque en oto??o, con la diversidad de colores que pueden tener los ??rboles, no quedar??a bien un fondo blanco, ni rosa o azul. Lo suyo ser??a una tonalidad amarillenta, lo m??s parecida a la imagen que has colocado.
Otro tema es la altura de la imagen.
Un blog puede tener una altura casi infinita, dependiendo de la cantidad de entradas que se muestren y/o de las cosas que haya en la columna lateral.
As??, como una imagen tiene solo la altura de la pantalla, al bajar en el blog la imagen se acabar??, con lo que se ver?? un fondo liso despu??s de ella.
Para evitarlo, se ha de fijar la imagen, de forma que el blog se deslice sobre ese fondo y la imagen ha de ser tan alta como la pantalla, (unos 900 pixels).
Tambi??n has de tener en cuenta que no todos los servidores almacenan la imagen en su medida real. Picasa, por ejemplo, tiende a reducirlas, con lo que una imagen grande almacenada all?? no sirve de mucho en este caso.
Para que el blog se deslice sobre el fondo se ha de a??adir fixed a esa l??nea del background, detr??s de las ??rdenes anteriores y antes del punto y coma.
Este fixed tambi??n se puede a??adir aunque la imagen sea peque??a y abarque todo el blog, por largo que sea, para dar esta sensaci??n de deslizamiento.
Si has pinchado en el enlace que te he dejado del blog con fondo de ladrillos, ver??s que ??so es lo que hace la zona ??til de aquel blog.
Pero ??cuidado! este efecto solo se produce en blogs con medidas fijas. En los modelos que usan % en sus medidas este efecto no se produce.
Eso es debido a que en estos casos, la zona ??til del blog abarca toda la pantalla, lo mires como lo mires, con lo que el body est?? pero no se ve de la misma forma que en los otros casos.
Y siempre, siempre, siempre, haz vista previa antes de guardar la plantilla, pues es m??s sencillo borrar los cambios que tratar de recordar qu?? habia ah?? antes de que a??adieras algo.
Resumen. C??digos del background de body.
background:#fff; o background:$bgcolor; o background:$bgColor;
(solo hay un color de fondo ya sea escrito en modo hexagesimal, o por variable. He puesto dos modos distintos en que puede estar escrita esta variable).
A partir de aqu?? voy a usar solo la segunda opci??n, que es la de la minima, aunque puede ser que en tu blog se vea la primera, (cuando no se puede cambiar el color del fondo desde fuentes y colores, como en la rounders4) o la tercera, por que la variable se escribe de otro modo, como en la Denim y otras.
background:$bgcolor url(«direcci??n»);
Hay un color, que quiz?? no se vea y una imagen que se repetir?? a lo largo y ancho de la pantalla y del blog.
background:$bgcolor url(«direcci??n») fixed;
Hay un color de fondo que seguramente no se ver??, una imagen que se repetir?? a lo largo y ancho de la pantalla y sobre la que se deslizar?? la zona ??til del blog.
background:$bgcolor url(«direcci??n») no-repeat center top fixed;
Hay un color de fondo que posiblemente se ver??, una imagen grande que no se repetir??, centrada desde ariba de todo y fija para que el blog se deslice sobre ella.
Otras variantes de este c??digo:
background:$bgcolor url(«direcci??n») repeat-y;
Hay un color de fondo, que se ver?? y una imagen que solo se repetir?? a lo largo del blog, (si no especificas nada lo har?? a la izquierda del todo). La imagen se mover?? junto a la zona ??til del blog.
background:$bgcolor url(«direcci??n») repeat-y right top;
Hay un color de fondo que se ver?? y una imagen que se repetir?? a lo largo del blog, pero a la derecha.
En estos casos la imagen se ver??a al principio o al final de todo de la pantalla, con lo que si tu blog tiene las medidas originales, (la zona ??til de la m??nima, por ejemplo, tiene 660 p??xels de ancho), si quien est?? viendo tu blog tiene una pantalla de 22″ y suele ver los blogs a toda pantalla, ver?? la imagen perdida a la izquierda del todo.
Si has ensanchado tu blog, y quien lo est?? viendo usa una resoluci??n menor que tu blog, la imagen quedar?? debajo de la zona de las entradas o de la sidebar.
Si deseas poner una imagen as??, pero pegada a alguna de las zonas de tu blog, eso has de ponerlo en el background de dicha zona, modificando paddings para que lo que contenga, ya sea las entradas o los gadgets, no se superpongan a la imagen. (Ya llegaremos a eso).
Un par de cosas m??s antes de terminar este tema:
He visto en varios blogs fondos colocados mediante un c??digo en un elemento HTML/Javascript.
Suelen funcionar bien, pero no lo recomiendo. Lo ideal es ponerlo como explico aqu??.
El motivo es muy sencillo. El fondo es lo primero que se ve.
En conexiones lentas, los navegadores suelen tardar un poco en mostrar todo el contenido del blog, con lo que, si el c??digo del fondo est?? en un gadget, hasta que no aparezca ese gadget, aunque no se vea en el blog, no se ver?? el fondo.
Tambi??n he visto que eso suele pasar en blogs a los que previamente no se les ha quitado el fondo que tenian, as?? que el navegador muestra primero el fondo original, d??ndole al blog un aspecto extra??o.
Cuando finalmente aparece el fondo que se ha de ver ya te das cuenta de como es realmente ese blog, pero…
Por otro lado tened cuidado al poner una url en el blog.
Algunos sitios ofrecen fondos «gratuitos» y te dan la url a copiar para que lo pongas.
Mira bien esa url.
Si no es algo as??: http://direcci??n.jpg o http://direcci??n.gif si contiene m??s de un http no la uses.
Es posible que incluya publicidad indeseada la cual se ver?? en un recuadro de tu blog y que aparecer?? donde menos lo desees.
Esto suele pasar sobretodo, con ese sistema que te digo de fondo colocado en un gadget.
Suelen darte un c??digo m??s largo, que es el que hace funcionar la imagen como fondo, pero tambi??n incluye publicidad, ya sea a la propia p??gina que te ha ofrecido el servicio, ya sea a otro sitio y luego todo son consultas de como quitar ese recuadro indeseado.
No Comments Found