Para establecer un color o imagen de fondo en la página entera, se debe establecer un fondo al elemento
<body>.
Si se establece un fondo a la página, como el valor inicial del fondo
de los elementos es transparente, todos los elementos de la página se
visualizan con el mismo fondo a menos que algún elemento especifique su
propio fondo.CSS define cinco propiedades para establecer el fondo de cada elemento (
background-color, background-image, background-repeat, background-attachment, background-position) y otra propiedad de tipo "shorthand" (background).La propiedad
background-color permite mostrar un color
de fondo sólido en la caja de un elemento. Esta propiedad no permite
crear degradados ni ningún otro efecto avanzado.| Propiedad | background-color |
|---|---|
| Valores | color | transparent | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | transparent |
| Descripción | Establece un color de fondo para los elementos |
body { background-color: #F5F5F5; }
background-image, que permite mostrar una imagen como fondo de la caja de cualquier elemento:| Propiedad | background-image |
|---|---|
| Valores | url | none | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | none |
| Descripción | Establece una imagen como fondo para los elementos |
El siguiente ejemplo muestra una imagen como fondo de toda la página:
body { background-image: url("imagenes/fondo.png") }
Así, las imágenes correspondientes al diseño de la página se mantienen separadas del resto de imágenes del sitio y el código CSS es más sencillo (por utilizar URL relativas) y más fácil de mantener (por no tener que actualizar URL absolutas en caso de que se cambie la estructura del sitio web).
Por otra parte, suele ser habitual indicar un color de fondo siempre que se muestra una imagen de fondo. En caso de que la imagen no se pueda mostrar o contenga errores, el navegador mostrará el color indicado (que debería ser, en lo posible, similar a la imagen) y la página no parecerá que contiene errores.
Si la imagen que se quiere mostrar es demasiado grande para el fondo del elemento, solamente se muestra la parte de imagen comprendida en el tamaño del elemento. Si la imagen es más pequeña que el elemento, CSS la repite horizontal y verticalmente hasta llenar el fondo del elemento.
Este comportamiento es útil para establecer un fondo complejo a una página web entera. El siguiente ejemplo utiliza una imagen muy pequeña para establecer un fondo complejo a toda una página:
Imagen original
Figura 4.18 Imagen original utilizada para el fondo de la página
body { background-image:url(imagenes/fondo.gif); }
Figura 4.19 Página con una imagen de fondo
En ocasiones, no es conveniente que la imagen de fondo se repita horizontal y verticalmente. Para ello, CSS introduce la propiedad
background-repeat que permite controlar la forma de repetición de las imágenes de fondo.| Propiedad | background-repeat |
|---|---|
| Valores | repeat | repeat-x | repeat-y | no-repeat | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | repeat |
| Descripción | Controla la forma en la que se repiten las imágenes de fondo |
repeat indica que la imagen se debe repetir en todas direcciones y por tanto, es el comportamiento por defecto. El valor no-repeat muestra una sola vez la imagen y no se repite en ninguna dirección. El valor repeat-x repite la imagen sólo horizontalmente y el valor repeat-y repite la imagen solamente de forma vertical.
