# Fondos

En esta lección aprenderás las propiedades que se pueden aplicar a los fondos de cualquier elemento de una página web:

- la propiedad compuesta background
- color de fondo
- imagen de fondo
- repetición de la imagen
- posición de la imagen
- atadura de la imagen

## La propiedad compuesta background

La propiedad compuesta background te 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).

Volver al índice

## background-color: color de fondo

Puedes establecer el color de fondo de cualquier elemento con la propiedad background-color.

body { background-color: lightblue; } | El fondo de esta página es azul

Volver al índice

## background-image: imagen de fondo

Puedes poner cualquier imagen como fondo de un elemento con la propiedad background-image. 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 relativo desde la hoja de estilo. En el ejemplo siguiente, la imagen se encuentra en la carpeta img y se llama groucho.jpg. 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 doble (").

body { background-image: url("img/groucho.jpg"); } | El fondo de esta página es una imagen. No se nota mucho, pero es la silueta de Groucho Marx. 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 la imagen.
body { background-image: url("img/groucho.jpg"); } |

Volver al índice

## background-repeat: repetición de la imagen de fondo

Por omisión, los navegadores repiten la imagen de fondo tanto en vertical como en horizontal. La propiedad background-repeat te 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).

body { background-image: url("img/groucho.jpg"); background-repeat: no-repeat; } |
body { background-image: url("img/groucho.jpg"); background-repeat: repeat-x; } |
body { background-image: url("img/groucho.jpg"); background-repeat: repeat-y; } |
body { background-image: url("img/groucho.jpg"); background-repeat: repeat; } |

Volver al índice

## background-position: posición de la imagen de fondo

Puedes establecer la posición de la imagen de fondo con la propiedad background-position. A esta propiedad hay que darle dos valores: la posición horizontal y la posición vertical. Puedes 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.

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. Mozilla sigue el borrador de la recomendación CSS 2.1, por lo que muestra la imagen arriba a la izquierda si se escribe, por ejemplo, background-position: right bottom Sin embargo, Internet Explorer permite que se haga en cualquier orden mientras no haya ambigüedad, por lo que la posición del fondo seguirá siendo 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.

body { background-image: url("img/groucho.jpg"); background-repeat: no-repeat; background-position: right bottom;} |
body { background-image: url("img/groucho.jpg"); background-repeat: no-repeat; background-position: 50% 100%; } |
body { background-image: url("img/groucho.jpg"); background-repeat: no-repeat; background-position: bottom 100%; } /* bottom 100% es incorrecto, lo correcto sería decir 100% bottom (primero la posición horizontal y luego la vertical) */ |

Volver al índice

## background-attachment: atadura de la imagen de fondo

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).

Mozilla e Internet Explorr aplican correctamente esta propiedad en <body> o <html>, pero no siempre en otras etiquetas. Por ejemplo, Mozilla 1.8.4a no muestra correctamente el segundo ejemplo siguiente, en el que una división tiene imagen de fondo, pero Internet Explorer sí. No he visto en bugzilla ningún bug relacionado.

body { background-image: url("img/groucho.jpg"); background-repeat: no-repeat; background-position: right top; background-attachment: scroll;} | Este cuadro tiene la imagen de Groucho 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.
body { background-image: url("img/groucho.jpg"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed;} | Este cuadro tiene la imagen de Groucho 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.

Volver al índice