# Fondos

En 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

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

    body {
      background: url("gota.png") greenyellow;
    }
/* Imagen de fondo gota.png: */ | Esta celda tiene color de fondo greenyellow y una imagen con transparencia, por lo que el color de fondo sí que es visible.

Volver al principio de la página

## Color de fondo: background-color

La propiedad background-color establece el color de fondo de cualquier elemento con la propiedad .

    body {
      background-color: greenyellow;
    }
| El fondo de esta celda es greenyellow.

Volver al principio de la página

## Imagen de fondo: background-image

La propiedad background-image establece cualquier imagen como fondo de un elemento. 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.

    body {
      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.
    body {
      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.

    body {
      background-color: greenyellow;
      background-image: url("verde.jpg");
    }
| Esta celda tiene color de fondo greenyellow 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:

    body {
      background-color: greenyellow;
      background-image: url("gota.png");
    }
| Esta celda tiene color de fondo greenyellow y una imagen con transparencia, por lo que el color de fondo sí que es visible.
    body {
      background-color: orange;
      background-image: url("gota.png");
    }
| Esta celda tiene color de fondo orange 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. En el primer ejemplo siguiente, no se ve el color orange porque la propiedad background anula la propiedad background-color anterior. En el segundo ejemplo, sí que se ve el color orange porque la propiedad background-color está después de la propiedad background.

    body {
      background-color: orange;
      background: url("gota.png");
    }
| Esta celda tiene color de fondo orange 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.
    body {
      background: url("gota.png");
      background-color: orange;
    }
| Esta celda tiene color de fondo orange y la misma imagen con transparencia del ejemplo anterior, pero el color de fondo sí es visible porquebackground-color está establecido posteriormente.

Se pueden superponer las imágenes de fondo de varios elementos anidados (las imágenes de fondo de los elementos exteriores se verán si las imágenes de fondo de los elementos interiores contienen píxeles transparentes).

    body {
      background: url("franja_horizontal.png");
    }

    p {
      background: url("franja_vertical.png");
    }
| Esta celda tiene una imagen de fondo con franjas horizontales y este párrafo tiene una imagen de fondo con franjas verticales. En el párrfo se ven tanto unas como otras, pero las franjas verticales se ven encima de las horizontales.

Volver al principio de la página

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

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

    body {
      background-image: url("verde.jpg");
      background-repeat: no-repeat;
    }
    body {
      background-image: url("verde.jpg");
      background-repeat: repeat-x;
    }
    body {
      background-image: url("verde.jpg");
      background-repeat: repeat-y;
    }
    body {
      background-image: url("verde.jpg");
      background-repeat: repeat;
    }

Volver al principio de la página

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

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:

    body {
      background-image: url("verde.jpg");
      background-position: right bottom;
      background-repeat: no-repeat;
    }
    body {
      background-image: url("verde.jpg");
      background-position: bottom right;
      background-repeat: no-repeat;
    }

Si se emplea un único término, se supone que el otro es center.

    body {
      background-image: url("verde.jpg");
      background-position: bottom;
      background-repeat: no-repeat;
    }

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.

    body {
      background-image: url("verde.jpg");
      background-position: 50% 100%;
      background-repeat: no-repeat;
    }
    body {
      background-image: url("verde.jpg");
      background-position: 100% 50%;
      background-repeat: no-repeat;
    }

Si se emplea un único valor numérico, se supone que hace referencia a la posición horizontal y valor ausente es 50%.

    body {
      background-image: url("verde.jpg");
      background-position: 100%;
      background-repeat: no-repeat;
    }

Nota: Internet Explorer 8 muestra correctamente el valor center en vertical de la propiedad background-position cuando se utiliza en las etiquetas <body> o <html>. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.

La recomendación CSS 2 del W3C no permitía mezclar números y palabras, pero la recomendación CSS 2.1 sí que permite 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.

En el ejemplo siguiente los navegadores muestran la imagen correctamente, abajo a la derecha.

    body {
      background-image: url("verde.jpg");
      background-position: 100% bottom;
      background-repeat: no-repeat;
    }

En el ejemplo siguiente los navegadores muestran la imagen de fondo arriba a la izquierda porque no hacen caso de la propiedad background-position, puesto que la propiedad background-position del ejemplo no es válida.

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

Nota: Internet Explorer 8 no hace caso de la propiedad background-position cuando el primer término se refiere a la posición vertical y el segundo a la horizontal. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

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

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");
      background-position: right top;
      background-repeat: no-repeat;
    }
| 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.

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 en dos elementos: <body> y los dos primeros párrafos <p> (con clase "confondo").

- En el caso de <body>, la imagen está arriba a la izquierda. Como el elemento <body> ocupa toda la ventana, la imagen de fondo se ve todo el tiempo. Incluso si se desplaza el texto, la imagen permanece a la izquierda.
- En el caso de los dos primeros párrafos, la imagen está arriba a la derecha. Pero no arriba a la derecha de los párrafos, sino arriba a la derecha de la ventana. Además la imagen sólo se ve cuando los primeros párrafos están encima de la posición de la imagen (arriba a la derecha de la ventana). Es decir, solamente se ve la imagen arriba a la derecha cuando el párrafo está también arriba a la derecha. Además, como <body> tiene un margen de 50px, siempre se pierde parte de la imagen. Al desplazar el texto hacia arriba, se llega a ver la parte superior de la imagen que al principio permanecía oculta, pero la parte derecha no. Los párrafos siguientes no tienen imagen de fondo, por lo que no muestran la imagen de fondo cuando llegan arriba a la derecha. 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 7 mostraba correctamente la imagen de fondo con background-attachment: fixed con el elemento. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.

Volver al principio de la página

## Imagen de fondo y márgenes exteriores e interiores

Salvo para el elemento <html>, las imágenes de fondo se colocan del borde para adentro del elemento, es decir, que:

- si el elemento tiene margen interior, el margen interior muestra la imagen o el color de fondo,
- si el elemento tiene margen exterior, el margen exterior no muestra la imagen o el color de fondo (se dice que el margen exterior es trasparente).

En el caso de repetición de la imagen de fondo, la posición inicial de la imagen es la esquina superior izquierda y se repite a partir de esa posición.

    body {
      background-color: lightblue;
    }

    p {
      background: url("cuadricula.png");
      background-color: orange;
    }

    p.con-margen-exterior {
      margin: 10px;
    }

    p.con-margen-interior {
      padding: 10px;
    }
| Este párrafo tiene una imagen de fondo con una rejilla y color de fondo orange, pero sin margen exterior. Este párrafo tiene una imagen de fondo con una rejilla y color de fondo orange, pero con margen exterior. El margen exterior es transparente (sin rejilla), por eso se ve de color lightblue. Este párrafo tiene una imagen de fondo con una rejilla y color de fondo orange, pero con margen interior. El margen interior tiene la rejilla y color de fondo del párrafo.

En el caso del elemento <html> con margen exterior, las imágenes o colores de fondo también se muestran en el margen exterior. La posición inicial de la imagen sigue siendo la esquina superior izquierda, pero la imagen se repite "hacia atrás" para cubrir el margen exterior, como puede comprobarse en la siguiente página de ejemplo o en las siguientes capturas de pantalla de esa página en Firefox. En esa página de ejemplo, la imagen de fondo es una cuadricula de 50x50px ( ) y tanto <html> como <body> tienen un margin y padding de 10px, por lo que espacio alrededor del contenido es de 40px en total (10px+10px+10px+10px).

Nota: Internet Explorer 8 muestra correctamente las imágenes de fondo en <html> con márgenes exteriores. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.