FondosFondosEn esta página se explican las propiedades que se pueden aplicar a los fondos de cualquier elemento de una página web:
La propiedad compuesta background permite definir simultáneamente todas las propiedades relacionadas con el fondo de cualquier elemento: background-color, background-image, background-position, background-repeat y background-attachment (explicadas más adelante en esta página).
  |
td {
background: url("gota.png") lightyellow;
}
|
Esta celda tiene color de fondo lightyellow y una imagen con transparencia, por lo que el color de fondo sí que es visible. |
La propiedad background-color establece el color de fondo de cualquier elemento con la propiedad .
| |
td {
background-color: lightblue;
}
|
El fondo de esta celda es lightblue. |
La propiedad background-image establece cualquier imagen como fondo de un elemento con la propiedad . La sintaxis es la siguiente background-image: url("nombre_de_la_imagen"), en la que el nombre de la imagen debe indicar el nombre (y la extensión) de la imagen, así como el camino absoluto o relativo desde la hoja de estilo. Las comillas que rodean el nombre de la imagen sólo son necesarias si hay espacios en blanco en el nombre de la imagen. Se pueden utilizar comillas simples (') o dobles (").
En el ejemplo siguiente, se utiliza la imagen siguiente: 
. Esta imagen se llama verde.jpg y se encuentra en
la misma carpeta que la hoja de estilo.
| |
td {
background-image: url("verde.jpg");
}
|
El fondo de esta celda es una imagen. Por omisión, los navegadores repiten la imagen en horizontal y vertical hasta ocupar todo el elemento que contiene la imagen de fondo. En el ejemplo siguiente se ve mejor el resultado. |
| |
td {
background-image: url("verde.jpg");
}
|
Si en un elemento tiene tanto color de fondo como imagen de fondo, la imagen se sitúa por encima del color. Si la imagen no contiene píxeles transparentes, el color de fondo no se ve.
| |
td {
background-color: lightblue;
|
Esta celda tiene color de fondo lightblue y una imagen sin transparencia, por lo que el color de fondo no es visible. |
Pero si la imagen contiene píxeles transparentes se ve el color de fondo:
| |
td {
background-color: lightblue;
|
Esta celda tiene color de fondo lightblue y una imagen con transparencia, por lo que el color de fondo sí que es visible. |
| |
td {
background-color: lightyellow;
|
Esta celda tiene color de fondo lightyellow y la misma imagen con transparencia del ejemplo anterior, por lo que el color de fondo sí que es visible. |
Hay que tener cuidado en utilizar la propiedad background-image y no la propiedad compuesta background, ya que la propiedad background anula las propiedades de fondo anteriores.
| |
td {
background-color: lightyellow;
|
Esta celda tiene color de fondo lightyellow y la misma imagen con transparencia del ejemplo anterior, pero el color de fondo no es visible porque la imagen de fondo está establecida posteriormente con background en vez de background-image. |
| |
td {
background: url("gota.png");
|
Esta celda tiene color de fondo lightyellow y la misma imagen con transparencia del ejemplo anterior, pero el color de fondo sí es visible porquebackground-color está establecido posteriormente. |
Firefox e Internet Explorer no muestran de la misma manera la imagen de fondo del elemento html, como se explica en la página de diferencias entre Firefox e Internet Explorer.
Por omisión, los navegadores repiten la imagen de fondo tanto en vertical como en horizontal. La propiedad background-repeat permite controlar esa repetición. Los valores posibles son no-repeat (para que la imagen no se repita), repeat-x (para que la imagen se repita únicamente en horizontal), repeat-y (para que la imagen se repita únicamente en vertical) y repeat (para que se repita en horizontal y vertical).
| |
td {
background-image: url("verde.jpg");
|
|
| |
td {
background-image: url("verde.jpg");
|
|
| |
td {
background-image: url("verde.jpg");
|
|
| |
td {
background-image: url("verde.jpg");
|
La propiedad background-position permite establecer la posición de la imagen de fondo. A esta propiedad hay que darle dos valores: la posición horizontal y la posición vertical. Se puede definir la posición con valores numéricos (porcentajes o distancias) o con palabras. Los términos para establecer la posición horizontal son left, center y right; los términos para establecer la posición vertical son top, center, bottom.
Si se emplean únicamente términos, el orden no es importante:
| |
td {
background-image: url("verde.jpg");
|
|
| |
td {
background-image: url("verde.jpg");
|
Si se emplea un único término, se supone que el otro es center.
| |
td {
background-image: url("verde.jpg");
|
Si se emplean únicamente valores numéricos, el primer valor hace referencia a la posición horizontal y el segundo a la posición vertical.
| |
td {
background-image: url("verde.jpg");
|
|
| |
td {
background-image: url("verde.jpg");
|
Si se emplea un único valor numérico, se supone que hace referencia a la posición horizontal y valor ausente es 50%.
| |
td {
background-image: url("verde.jpg");
|
Firefox e Internet Explorer no interpretan de la misma manera el valor center en vertical de la propiedad background-position cuando se utiliza en las etiquetas body o html. Firefox centra la imagen de fondo con respecto al contenido de la página (el texto, en este caso), mientras que Internet Explorer la centra con respecto a la ventana (salvo que esté definido en ambas etiquetas, en cuyo caso muestra uno centrado respecto al texto y otro respecto a la ventana).
Para ver la diferencia, se puede abrir las siguiente páginas de ejemplos en ambos navegadores y comparar el resultado, u observar estas capturas:
| Fondo centrado en html | Fondo centrado en body | Fondo centrado en html y en body | |
|---|---|---|---|
|
 |
 |
 |
|
 |
 |
 |
La recomendación CSS 2 del W3C dice que no se deben mezclar números y palabras, pero los borradores de la futura recomendación CSS 2.1 sí que permiten mezclar números y palabras, aunque obligan a que el primer término se refiera a la posición horizontal y el segundo a la vertical. Firefox sigue la recomendación CSS 2.1, pero Internet Explorer permite que se haga en cualquier orden, por lo que la posición del fondo será una fuente de problemas si los diseñadores de páginas web no conocen la recomendación y sólo prueban sus páginas en Internet Explorer.
En el ejemplo siguiente tanto Firefox como Internet Explorer muestran la imagen correctamente, abajo a la derecha.
|
|
td {
background-image: url("verde.jpg");
|
En el ejemplo siguiente Firefox, muestra la imagen de fondo arriba a la izquierda porque no hace caso de la propiedad background-position. Sin embargo Internet Explorer muestra la imagen de fondo abajo a la derecha, lo que es incorrecto puesto que la propiedad background-position del ejemplo no es válida.
 |
td {
background-image: url("verde.jpg");
|
La propiedad background-attachment establece el comportamiento de la imagen de fondo cuando se desplaza el elemento (al utilizar las barras de desplazamiento del navegador). Los valores posibles son scroll (la imagen acompaña al elemento) o fixed (la imagen permanece fija).
El valor scroll hace que la imagen acompañe al elemento y se puede aplicar en cualquier elemento.
| |
div {
background-attachment: scroll;
background-image: url("verde.jpg");
|
Este cuadro tiene una imagen como fondo. Si el texto no cabe en el
cuadro, el navegador muestra unas barras de desplazamiento (en este
caso, verticales). Si no ves las barras de desplazamiento, aumenta el
tamaño de la fuente o reduce el tamaño de la ventana hasta que
aparezcan las barras de desplamiento.
A continuación, desplaza el texto arriba y abajo y verás cómo la imagen se desplaza junto con el texto. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. |
El valor fixed hace que la imagen permanezca fija en la ventana y no se desplace cuando se desplaza el elemento. Pero además la posición de la imagen de fondo se interpreta siempre con respecto a la ventana y únicamente es visible cuando el elemento está en esa posición.
La página de ejemplo de imagen de fondo con background-attachment: fixed permite entender lo que ocurre. En esta página la imagen de fondo es una rejilla de 200px x 200px. Esa imagen está como imagen de fondo arriba a la izquierda en <body>, por lo que al desplazar el texto la imagen permanece a la izquierda. También está como imagen de fondo arriba a la derecha de los dos primeros párrafos. Por eso, solamente se ve la imagen arriba a la derecha cuando el párrafo está también arriba a la derecha. Además, como el margen de <body> es de 50px, siempre se pierde parte de la imagen. Al desplazar el texto hacia arriba, la imagen permanece fija. Los párrafos siguientes no tienen imagen de fondo, por lo que no muestran la imagen de fondo cuando llegan a la parte superior de la ventana.
También se puede observar en la página de ejemplo que aunque el segundo párrafo con imagen de fondo es muy largo en horizontal, la imagen de fondo sólo se ve en el trozo que está dentro del elemento (con color de fondo).
Nota: Internet Explorer 6 mostraba la imagen de fondo con background-attachment: fixed igual que las imágenes de fondo con background-attachment: scroll, es decir, que se desplazaban con el elemento.
Autor: Bartolomé Sintes Marco