Fondo de cenefas ajustable a la resolución de pantalla

(Desarollado gracias al fusilamiento de la página http://www.forosdelweb.com/f53/poder-poner-2-backgrounds-fijos-466122/

y http://tips-for-new-bloggers.blogspot.com/2007/03/background-image-for-blogger-template.html . ¡Gracias tíos!)


¡Buenas!


Os habréis dado cuenta de que el fondo de pantalla de las diferentes webs muchas veces está descolocado, recortado o demasiado pequeño o sencillamente parece que “no está cómo debería”. Esto se debe a que el fondo de pantalla es una imagen fija de un tamaño determinado, y si nuestra resolución de pantalla/navegador es diferente a la de la imagen pueden pasar dos cosas:

Si es mayor la de la imagen que la del navegador/resolución de pantalla: la imagen se corta, es decir, parte de ella no se ve.

Si es menor la de la imagen que la del navegador/resolución de pantalla: la imagen no llega a cubrir todo el fondo

En los blogs de Blogger esto plantea un mayor problema, ya que son páginas prefabricadas ¿Cómo podemos solucionar esto? Hay una serie de prácticas comunes: (Esta información la he obtenido de: http://tips-for-new-bloggers.blogspot.com/2007/03/background-image-for-blogger-template.html)

A) Repetir la imagen de fondo por toda la pantalla: es lo que hacen por defecto todas las imágenes de fondo; en el caso de que no lo haga, podemos forzarlo con background-repeat: repeat

B) Repetir la imagen de fondo SÓLO EN HORIZONTAL O VERTICAL: con background-repeat: repeat-y; (Para vertical) y background-repeat: repeat-x; (Para horizontal)

C) Fijar la posición de la imagen con la directiva background-position: top left; (Explícalo en la página anteriormente citada) y fijarla para que no se mueva cuando bubamos y bajemos navegando la página.

Hasta ahora no he dicho nada nuevo (¿O sí?) Pero... ¿cómo se puede hacer si tenemos un fondo que consista en dos márgenes, dos cenefas, una a cada borde de la página, como en la siguiente -mi- página?



Si lo hacemos a la manera tradicional, es decir, con un fondo de pantalla que se repita verticalmente cuando alguien con una resolución de pantalla diferente/navegador entre en nuestra página se va a encontrar con esto:

Bonito o feo no es lo que queríamos hacer…entonces ¿Cómo se hace? Pues con hojas de estilo Css. Para ello necesitas dos imágenes, una para la cenefa de la derecha y una para la de la izquierda. La cenefa de la derecha la colocaremos como si fuera el fondo normal de un blog ¿Qué cómo se hace? Hay miles de tutoriales, aquí uno:

http://zonacerebral.com/2007/04/como-cambiar-el-fondo-del-blog-en-blogger.html

La enjundia es poner la cenefa de la izquierda… Vamos a ello:

1- Busca en diseño/edición de HTML esto: /* Header. Antes de seguir SALVA LA MALDITA PLANTILLA…

2- No digas luego que no te avisé

3- Pega esto justo encima de /* Header. :

: #page {

background-image: url('Aquí va la dirección de tu imagen. No quites las comillas pero borra este texto. ');

background-position: top left;

background-repeat: repeat-y;

}

4- Busca en diseño/edición de HTML esto:

5- Pega esto justo debajo de :

6- Da a salvar y listo


Jugando con todo esto y las propiedades del fondo (Puedes consultarlas aquí ¿Qué tal andas de inglés? http://tips-for-new-bloggers.blogspot.com/2007/03/background-image-for-blogger-template.html) puedes situar las dos cenefas arriba y abajo, o arriba y a la izquierda, o incluso poner tres o 4 cenefas, para hacer una cenefa que cubra todo el borde de la página, como el marco de un cuadro. ¡Ánimo! Y si te funciona dímelo.


P.D: Intentaré ayudar en lo que pueda si tienes dudas. Acepto también puntualizaciones y correcciones. Pero no esperes mucho de mí, que soy de letras.