Thursday, January 18, 2007

Un buen fondo es primordial

Hoy trataremos de sumergir nuestro espacio blógico en una esfera estética proporcionada por el fondo. Tras la declaración de intenciones gráficas que supone la cabecera, empapar todas y cada una de las páginas del blog con una imagen de fondo sugerente terminará de definir nuestro estilo y la dirección de nuestro delirio electrónico.

Como primer paso, deberemos escoger la imagen adecuada. Tendremos en cuenta dos factores: el peso de la imagen (lo que ocupa en Kbs) y su aspecto:

- El peso: es importante que la imagen no pese mucho. Por ello procuraremos seleccionar imágenes que, al repetirse, creen patrones. De esta manera nuestro fondo en .jpg o en .gif (descartaremos cualquier otro formato, de momento), una vez cargado, se repetirá sin dilación, permitiendo a nuestros insignes visitantes dedicarse a bucear por el contenido del blog, que es a lo que han venido.

- El aspecto: siempre tenderemos hacia las imágenes sencillas, que no desvíen la atención de lo que nos interesa y que no produzcan un dolor de cabeza instantáneo al pobre blogadicto que los sufra. Un mal ejemplo de fondo lo podemos ver aquí. Obsérvese que tarda una cantidad ingente de tiempo en cargar y, además, una vez visualizado, produce en el espectador brotes psicopáticos de baja frecuencia. Aquí se puede observar otro ejemplo claro de lo que no se debe hacer.

Por el contrario, observe en este otro blog la elegancia con la que se ha elegido el fondo, lo acorde con el contenido, y lo bien ejecutado que está para que no pese mucho ni en la carga de la página ni en la mente del blogovidente. Si observamos con detenimiento, la imagen de fondo se reduce a esto, sujeto a una repetición a lo largo del eje Y (vertical). Puede usted encontrar otro ejemplo más recargado pero no por ello menos elegante aquí. Observará que en ambos ejemplos la repetición es en el eje Y, de gran utilidad debido al carácter vertical de los blogs, y así será por lo tanto el ejercicio de hoy, al que damos paso inmediatamente.

Como primer paso y, una vez elegida la imagen de fondo, la subiremos a nuestro albergador de imágenes online preferido. Obtenido pues el enlace, accederemos a nuestra plantilla y buscaremos el siguiente código, al principio de la misma.

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}


Entonces, añadiremos tres sencillas líneas:

body {
background: url(aquí va la URL de nuestra imagen);
background-repeat: repeat-y;
background-position:center;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:left;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}


De las cuales:
- La primera indica qué imagen es la que se establece como fondo;
- La segunda indica en qué eje se repite dicha imagen: en este caso, vertical;
- La tercera se refiere a que dicha imagen estará centrada en la pantalla. Podemos elegir left para alinearla a la izquierda o right para alinearla a la derecha, según nos interese.

También podemos dejar tal línea en repeat a secas, de tal manera que el fondo se repita tanto en vertical como en horizontal, obteniendo así un efecto similar al que puede usted contemplar en esta santa casa.

Dicho esto, disfute usted de su nuevo y flamante fondo y espero verle por aquí en el próximo fascículo de bricolaje bloggero.

43 Comments:

Blogger karramarro said...

Cojonuda idea. Y gracia spor lo que me toca :)

En cuanto tengas un poco más de material te pongo en el utilitario ;)

11:06 AM  
Blogger Puño said...

yuju!!!!!

11:49 AM  
Blogger molina said...

Hoy mismo el Juarma me andaba diciendo que queria mejorar el diseño de su blog.
Le vienes niquelao.

1:05 PM  
Blogger Puño said...

coño, pues me alegro, esa es la intención!

2:13 PM  
Blogger oskitar said...

recoñe!!!!
dicho y hecho, ya sabes onde estoy pa lo que sea.

2:46 PM  
Blogger 4ojos said...

Pero, pero, pero, pero..¡si es usté un maestro!

8:34 PM  
Blogger Puño said...

acaso lo dudaba usté? XD

2:08 AM  
Anonymous Anonymous said...

genial la propuesta.

cada vez que me pregunten algo los acercaré a este lugar :P

a menos que la que pregunte sea una chica, que probablemente me usará y desechará.

saludos.

3:42 PM  
Blogger koko said...

eureka funciona

4:50 PM  
Blogger Puño said...

maskin: si es chica me la envías a mí, te lo agradeceré toda mi vida :D

koko: te lo dije!

5:49 PM  
Blogger alberto vazquez said...

Guay tío!! de puta madre
La cuestión es que esta lección me parece la de la elección más complicada porque ha de casar el diseño del fondo con el d e la cabecera....a ver, aver...hay que replantearselo todo.
Saludos!!!

2:40 PM  
Blogger Puño said...

sí, totalmente.

yo he subido esto para que se vea cómo funciona, pero tengo que replantearme todo el diseño del blog antes de que avancen las lecciones y esto acabe pareciendo una web de todo a 100.

de todas formas, el tuyo así, tan blanquito, queda de puta madre.

3:09 PM  
Blogger alberto vazquez said...

Tío...no me va...no sé porqué...lo hago bien en teoría
body {
background: url (http://img206.imageshack.us/img206/7969/fondo8jc.jpg);
background-repeat: repeat-y;
background-position:center;
margin:0;

Eso es lo que le pongo. Le meto una imagen de 30 por 15 cm a 72pp que pesa 30 k y no me va...
¿sabes porqué puede ser????

4:30 AM  
Blogger Puño said...

cierras el '}' al final?

10:19 AM  
Blogger alberto vazquez said...

Sí tío...aquí te pego l mío:
body {
background: url (http://img206.imageshack.us/img206/7969/fondo8jc.jpg);
background-repeat: repeat-y;
background-position:center;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}


no sé porqué no rula!!!

11:57 AM  
Blogger Puño said...

yo sí. te costará un original de alberto vázquez saber porqué!

arg arg arg!

por cierto, me he comprado el ARGH! hoy y está de puta madre. me encantaría participar, leñes.

ah, que ya sé cuál es el fallo: no dejes un espacio entre URL y (http://....

:)

12:29 PM  
Blogger 1977 said...

Una buena alternativa para cuando ImageShack está tonto. De hecho yo suelo utilizar más ImgFly.

9:09 PM  
Blogger Puño said...

gracias ramónch!

3:15 AM  
Blogger alberto vazquez said...

EY!! Tenías razón...qué estricto el lenguaje html!!!!
Gracias tío!!
Yo te daré encantado un original, pero has de venir hasta aquí para conseguirlo, y de paso unas vacaciones....Ya sabes que cuando quieras....
no sé si te has dado cuenta pero soy tu alumno más aventajado....je,je
Saludos!!!

3:45 AM  
Blogger Puño said...

estrictísimo!

las vacaciones galaicas las tengo planeadas en cuanto me den un respiro los cab... los clientes!

vázquez, tienes un punto extra esta evaluación :D

3:47 AM  
Anonymous Anonymous said...

Gracias tío, te lo agredeceré toda mi vida!

8:59 AM  
Blogger Puño said...

ya te lo advertí!

jajaja :D

9:18 AM  
Anonymous Anonymous said...

ejem... igual es un poco de morro... pero despues de probar unos cuantos fondos... me he quedado con el tuyo !

De paso he aprovechado para cambiar un poco las tipografias, que no me gustaban mucho. Pero no tengo muy claro cuales son las "web safe", aparte de las consabidas Arial, times, etc. Sigo buscando alguna un poco diferente para las fechas.

En fin, te lo agradeceré toda la vida

7:52 AM  
Blogger Puño said...

el mío es provisional y también es robado, así que si alguien te dice algo yo no he sido! :D

la próxima lección es sobre tipos y colores.

10:29 AM  
Anonymous Anonymous said...

¿ y qué pasa si la plantilla de mi blog no tiene ese código (el que empieza con "background")?

1:06 PM  
Blogger Puño said...

pasa que te has dejado llevar y te has convertido en beta-tester de blogger, a que sí?

ay manolete! si no sabes torear pa qué te metes! :D

en cuanto me dejen cambiarme (por lo visto no conceden más versiones de prueba) actualizaré esta lección.

lo que no entiendo es porqué la gente se ha pasado a la versión beta en masa si no vais a testear nada!!

1:20 PM  
Anonymous Anonymous said...

lo sospechaba. algo de la promesa blogger-beta debe haber inmunizado mis blogs.

será mejor que no te pases a lo de beta (que ahora dicen que no es beta sino blogger a secas) para evitar incidentes como los que me han ocurrido.

significa entonces que si creo un nuevo perfil para blogger tampoco podré testear tan suelto de cuerpo ???

que alguien de la blogosfera nos dé un rayo de luz o iré a los cuarteles generales de blogger para escribir graffitis en sus baños ....

4:40 PM  
Blogger Puño said...

no, hombre, yo espero cambiarme (si me dejan) precisamente para arrojar luz sobre este entuerto.

mientras me llega el momento, puedes iluminarte en otros blogs: http://testing-blogger-beta.blogspot.com/2006/09/adding-graphic-to-your-blog-header.html

5:13 PM  
Blogger Blanca Bk said...

Mil gracias Puño!
Viene de perlas!! :D

2:15 AM  
Blogger Manwé said...

Gracias por las instrucciones,unas primeras pruebas en www.lacanalla.blogspot.com

10:55 AM  
Blogger Kevin said...

Tio ue favor ps dime como colocar una imagen chica como en fondo de una pagina ok...!!
porfavor reponde que tengo que poner en el blog de notas bye

4:20 PM  
Blogger eduard said...

Salud puño, soy totalmente novato en esto de los blogs...después de mucho sudar y siguiendo tus pasos no consigo poner el fondo que me gustaria. Al cambiar el html ese de los cojones, me sale el fondo en blanco. No se, quizas tenga algo que ver con la versión esa Beta? A ver si me puedes decir algo porque estoy desquiziaoooooooooooooooo!!!

11:50 AM  
Blogger Puño said...

necesito más información.

a ver, pásame el link a la imagen y pégame el código pro aquí, que le eche un vistazo, y te cuento.

12:01 PM  
Blogger Ana Pérez said...

Pufff, voy a intentarlo despacito...
Tú crees que podré?

4:57 AM  
Blogger Puño said...

y si no, sólo tienes que decirlo!

5:13 AM  
Blogger Fujur said...

Efectivamente! te lo agradeceré toda la vida compañero!

Pq no pones más posts de esta utilidad máxima! collons!!

2:00 PM  
Blogger | Asmoix | said...

This comment has been removed by the author.

12:41 PM  
Blogger ThrasheRRene said...

Olaa puño mira yo tengo el mismo problema que uno de arriba... le cambio eso le pongo la direccion y las otras lineas pero me keda un fondo blanco totalmente ..
mira aqui te pego como lo tengo puesto...

body {
background:http://img410.imageshack.us/my.php?image=thrash2yd5.jpg;
background-repeat: repeat-y;
background-position:center;
margin:0;
color:#333;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: left;
}


amm nose quizas tiene que ver algo el tamaño de la imagen?? es de 700x700

nose si puedes echarme una mano te lo agredeceria un saludo!

6:53 AM  
Blogger Puño said...

hombre, 700 x 700 es una burrada de fondo!!!

6:57 AM  
Blogger Susi.a said...

S.O.S

A mi me pasa como alos otros me sale el fondo blanco.
si puedes orientarme seria genial

9:05 AM  
Blogger Puño said...

porqué no probáis a ponerlo así:

{
background-image:
url('http://www.w3schools.com/css/bgdesert.jpg')
}

9:48 AM  
Blogger Pequitas said...

hey yo hice mi cabecera pero resulta q por IE no se ve y el asunto es q no quiero q se vea el titulo del blog (solo la imagen) ...
help me

12:30 AM  
Blogger mayoma said...

hola¡¡no se como utilizar muy bien lo del blog y quiero poner en mi blog una pagina algo asi que cuando entres salgan videos

3:33 AM  

Post a Comment

<< Home