Modificando las plantillas (Tutorial 7: Fondos)

JMiur

Hace ya un par de meses, El escaparate de Rosa

publicó un artículo donde en los comentarios se chismorréa de lo lindo pero, acá somos gente seria así que solamente nos ocuparemos del tema técnico (y seguiremos leyendo los chismes, claro)

.

El título lo dice todo: Header con "ancho total" y viene a cuento para seguir con el tema del último tutorial donde se hablaba de centrar los blogs.

El término ancho total se refiere justamente a eso, a que la parte superior del blog, eso que llamamos "header" ocupe todo el ancho del monitor, sin importar la resolución de este.

La forma de hacerlo es sencilla, en realidad, no se trata de ampliar el blog o el HEADER sino de agregar una imagen extra en el BODY, una imagen que se repita y que, por ejemplo, como ha hecho Rosa, tenga colores iguales a los del HEADER mismo.

La imagen repetida la ponemos en el BODY de esta manera:

body {
background: #color url(URL_imagen) repeat-x left top;
.......
}

El body es un rectángulo que equivale a la pantalla del monitor y encima de este rectángulo está nuestro blog formado por una serie de rectángulos más. Si asimilamos esto a una serie de hojas de papel transparente, diríamos que en una hoja (BODY) dibujamos algo y en otra más chica que ponemos encima (HEADER), dibujamos otra cosa con lo cual, veremos ambas. El resultado de eso, será algo así como lo que se ve en este DEMO

La imagen del BODY puede ser cualquier cosa, como pueden usarse GIFs o PNGs transparentes o traslúcidos también podríamos usar modelos de fondos fijos:

body {
background: #color url(URL_imagen) repeat-x fixed left top;
.......
}

Pero, siempre hay alguien que pide un poco más, por ejemplo ¿y si quiero hacer lo mismo con el FOOTER?

Si hemos entendido la idea de los rectángulos superpuestos, es sencillo. Hay que buscar otro que sea tan grande como el BODY y, en realidad hay uno más; un rectángulo del que normalmente no hablamos y que en realidad, es el primero, el que está más abajo de todos y que contiene a toda la página. Seguramente lo han visto: es el elemento HTML.

En toda etiqueta HTML podemos agregar propiedades CSS y esta no es la excepción así que, si quisiéramos colocar dos fondos que ocupen todo el ancho de la pantalla, podríamos usar esos dos rectángulos:

html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}

El orden en que pongo las imágenes es indiferente siempre y cuando la posición de la que va abajo sea bottom y la posición de la que va arriba sea top. Lo que no es indiferente es el color de fondo porque estamos hablando de imágenes que no son muy grandes, gradientes o patterns que se repiten pero que terminan; en estos ejemplos sólo son de 5x200 pixeles así que el resto del fondo, eso que la imagen no alcanza a cubir, se llena con el color que repite el último color de la imagen (#DDDDFF).

Pensemos en las hojas transparentes, HTML es la de abajo, la pinto de un color; BODY es la de arriba, a esa le digo que sea transparente (transparent) para que se vea la de abajo, si lo hiciera al revés, la taparía y no la vería.

El resultado es el que se ve en este otro DEMO.

¿Qué pasará si en lugar de mosaicos repetitivos quiero poner una imagen fija?

No hay problema, sólo debemos cambiar repeat-x por no-repeat pero, deberemos tener en cuenta que se colocará en una posicion que dependerá del la resolución de la pantalla de quien abra la página así que, colocándola en el BODY no podremos controlarla. Este es el DEMO online.

También lo podemos colocar fijo, de tal manera que no se mueva cunado hacemos scroll, para eso usamos la palabra fixed:

body {
background: transparent url(URL_imagenFIJA) no-repeat fixed left top;
.......
}

Este es el DEMO.

¿Y si queremos usar tres imágenes o cuatro o cinco? Parece un poco abusivo pero hay de todo

Se nos acabaron los rectángulos predefinido pero, nada impide crear otros usando la etiqueta DIV; basta buscar la etiqueta <body> y agregar un nuevo rectángulo con un ID único:

<body>
<div id='otroBODY'>

y por supuesto, debemos cerrarla. Para eso, buscamos </body> y, justo antes, colocamos el cierre:

</div>

</body>

De este modo, podemos agregar cuantas se nos ocurra y luego, agregar el CSS correspondiente:

html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}
#otroBODY {background: transparent url(URL_imagenCENTRAL) no-repeat fixed left top;
}