Una de las opciones más interesantes para empezar a componer las páginas con hojas de estilo, y que es bien sencilla de usar, es el uso de imágenes como fondos. Mucha gente usa programas como Photoshop para preparar un diseño, y luego cortarlo en trozos para usar bien dentro de una celda, o bien como fondo de celda (cosa que por cierto, ya no forma parte ni de la especificación de HTML4.01, aunque los navegadores lo acepten).
Pues bien, para los que quieran dar un paso más hacia el uso de las hojas de estilo en la realización de la parte estética de la página, os explico como poner imágenes de fondo. Veréis que es un sistema más potente que el propio de las tablas.
Primero: ¿dónde podemos usar imágenes de fondo? Pues en muchos elementos: celdas, tablas, capas, párrafos, enlaces… Como podéis imaginar, las posibilidades de composición son muy amplias. Por ejemplo, podéis usar imágenes para hacer enlaces personalizados, como explican en A List Apart. Pero vayamos a lo que nos interesa, usar imágenes como fondo para la composición.
Veamos primero que nos dice la definición de fondo en la especificación 2.1 de las hojas de estilo. Explica que el fondo se aplica al contenido, al borde y a los márgenes de un elemento. Los últimos son siempre transparentes, el borde se controla con la propiedad border y el contenido que es lo que nos interesa ahora, se controla con background.
Para detallarlo, tenemos 5 propiedades, de las cuales dos las podíamos utilizar según el viejo estilo con Frontpage, Dreamweaver y similares (background-color y background-image), y luego tenemos tres más, de las que nos interesan ahora background-position y background-repeat.
Ellas nos permitirán controlar dónde queremos que aparezca el fondo, y cómo queremos que se repita a lo largo de la página. Por ejemplo:
– Queremos poner una imagen de fondo a una celda, muy clara, a modo de marca de agua, de manera que el texto que haya por encima se lea perfectamente. Pero NO queremos que se repita a lo largo de la página a medida que crece el contenido. Pues no es necesario hacer una imagen de 4000 píxeles de alto para que no se repita. Simplemente le decimos:
td {
background-image: url("nuestra_imagen.gif");
background-position: no-repeat;
}
Y ya no se repetirá ese fondo. Un ejemplo lo podéis encontrar en la página que hice para la lista Aerolínea, donde a cada sección le doy un fondo muy claro bajo las letras. El código que utilizo es el siguiente:
#principal_ib320 {
padding: 0 25px 0 25px;
background: url("../images/ib320.jpg") 80% 5% no-repeat;
}
Aquí le estoy asignando las propiedades a una capa llamada #principal_id320, a la que le digo los bordes que quiero, y el fondo. Cosas a tener en cuenta:
url("../images/ib320.jpg")
- La dirección de la imagen, es relativa a la hoja de estilos (el documento .css), no a la página que estamos cargando.
80% 5%
Aquí le decimos como posicionamos esa imagen. En este caso, un 80% de la izquierda, y un 5% de arriba. Podemos decirle también píxeles, o por ejemplo “center top“, “right bottom“, etc.
no-repeat
Esto está claro, le decimos que la imagen no se repita. Otras opciones serían:
- repeat-x – Para que crezca horizontalmente.
- repeat-y – Para que crezca verticalmente.
Véis que estoy usando la forma acortada de usar la propiedad background. Sería mismo decir:
#fondo {
background-color: #fff;
background-image: url("mi_imagen.jpg");
background-position: top center;
background-repeat: repeat-x;
}
que:
#fondo {
background: #fff url("mi_imagen.jpg") top center repeat-x;
}
Yo personalmente, prefiero usar siempre la forma acortada. 
Entonces, el paso a dar es definir clases e id’s en la hoja de estilos, en vez de poner fondos en el HTML, y así dejar el HTML para la estructura de la página, y la hoja de estilos para la parte gráfica. Y cortar nosotros a mano las imágenes, en vez de dejar al Photoshop que nos las corte, que como no vayamos con cuidado, nos hace unos líos de cuidado, con filas de 1px que no sabes de donde salen, etc.
Eso sí, si podéis, componed completamente con capas y hojas de estilo, veréis que cuesta al principio, pero luego es mucho más cómodo que las tablas.
Si queréis un ejemplo de cosas interesantes que se pueden hacer con esta propiedad y un poco de imaginación, leeros el artículo en castellano de las Faux Columns, original de A List Apart y traducido por The Raging Che.
A practicar.