CSS: Fondos

En esta página se explican las propiedades que se pueden aplicar a los fondos de cualquier elemento de una página web. Algunas de estas propiedades ya formaban parte de la recomendación CSS 2.1 y otras se han introducido en la futura recomendación CSS 3: Fondos y bordes. Aunque actualmente (diciembre de 2016) esta recomendación se encuentra en elaboración, los navegadores aceptan ya estas propiedades, por lo que pueden utilizarse sin problemas.

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") palegreen;
}

/* Imagen de fondo gota.png: Imagen de ejemplo para fondo */

Esta celda tiene color de fondo palegreen y una imagen con transparencia, por lo que el color de fondo sí que es visible.

Imágenes de fondo múltiples: background

La futura recomendación CSS 3: Fondos y bordes, actualmente (diciembre de 2016) en elaboración, permite que la propiedad compuesta background defina imágenes de fondo múltiples, simplemente separando entre comas las referencias a cada imagen.

div {
  border: black 2px solid;
  background: url("naranja.png") repeat-x bottom, url("azul.png");
}

Estos párrafos están en una división.

Estos párrafos están en una división.

Estos párrafos están en una división.

Estos párrafos están en una división.

Nota: Esta propiedad está comentada en http://helephant.com/2009/11/23/css3-multiple-background-images/.

Color de fondo: background-color

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

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

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 ("). Si hay espacios en blanco entre url y el paréntesis, los navegadores no muestran la imagen de fondo.

En el ejemplo siguiente, se utiliza la imagen siguiente: Imagen para fondo. 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: palegreen;
  background-image: url("verde.jpg");
}
Esta celda tiene color de fondo palegreen 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: palegreen;
  background-image: url("gota.png");
}
Esta celda tiene color de fondo palegreen 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 porque background-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.

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.

En la recomendación CSS 2.1, los posibles valores de background-repeat son:

La futura recomendación CSS 3: Fondos y bordes, actualmente (diciembre de 2016) en elaboración, ha añadido los valores:

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;
}
body {
  background-image: url("circulo.jpg");
  background-repeat: repeat;
}
body {
  background-image: url("circulo.jpg");
  background-repeat: space;
}
body {
  background-image: url("circulo.jpg");
  background-repeat: round;
}

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.

Los posibles valores de background-position son:

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;
}

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;
}

Ligadura 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 posibles valores de background-attachment son:

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

Extensión del fondo: background-clip

La propiedad background-clip permite definir la zona en la que aparece el fondo (color o imagen).

Los posibles valores de la propiedad background-clip son:

p {
  background-clip: border-box;

  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-color: lightblue;
}

Este párrafo tiene un borde y márgenes interiores para ver que se pueda ver hasta donde se extiende el color de fondo del párrafo gracias a la propiedad background-clip.

p {
  background-clip: padding-box;

  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-color: lightblue;
}

Este párrafo tiene un borde y márgenes interiores para ver que se pueda ver hasta donde se extiende el color de fondo del párrafo gracias a la propiedad background-clip.

p {
  background-clip: content-box;

  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-color: lightblue;
}

Este párrafo tiene un borde y márgenes interiores para ver que se pueda ver hasta donde se extiende el color de fondo del párrafo gracias a la propiedad background-clip.

Tamaño de la imagen de fondo: background-size

La propiedad background-size permite establecer el tamaño de la imagen de fondo.

Los posibles valores de la propiedad background-size son:

body {
  background-image: url("circulo.png");
  background-size: auto auto;
}
body {
  background-image: url("circulo.png");
  background-size: 33% 50%;
}
body {
  background-image: url("circulo.png");
  background-size: 50px 50px;
}
body {
  background-image: url("circulo.png");
  background-size: contain;
}
body {
  background-image: url("circulo.png");
  background-size: cover;
}

Si la imagen de fondo es una imagen de mapa de bits (jpg, png, etc.) y se aumenta, la calidad de la imagen se resiente. Sin embargo, si se utilizan imágenes en formato vectorial (SVG), la imagen se verá con la misma calidad independientemente del tamaño:

body {
  background-image: url("circulo.svg");
  background-size: auto auto;
}
body {
  background-image: url("circulo.svg");
  background-size: 33% 50%;
}
body {
  background-image: url("circulo.svg");
  background-size: 50px 50px;
}
body {
  background-image: url("circulo.svg");
  background-size: contain;
}
body {
  background-image: url("circulo.svg");
  background-size: cover;
}

Posición del origen del fondo: background-origin

La propiedad background-origin permite definir la zona en la que se sitúa el origen de la posición del fondo. Hay que tener en cuenta que una vez definido el origen de la imagen, esta puede repetirse en todo el esapcio disponible (al que afecta la propiedad background-clip).

Los posibles valores de la propiedad background-origin son:

En los ejemplos siguientes, el origen de la imagen de fondo va cambiando, pero la imagen se repite en todo el párrafo (borde incluido).

p {
  background-origin: border-box;
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula_transp.png");
  background-color: lightblue;
}

Este párrafo tiene un borde y márgenes interiores para ver que se pueda ver hasta donde se extiende el color de fondo del párrafo gracias a la propiedad background-clip.

p {
  background-origin: padding-box;
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula_transp.png");
  background-color: lightblue;
}

Este párrafo tiene un borde y márgenes interiores para ver que se pueda ver hasta donde se extiende el color de fondo del párrafo gracias a la propiedad background-clip.

p {
  background-origin: content-box;
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula_transp.png");
  background-color: lightblue;
}

Este párrafo tiene un borde y márgenes interiores para ver que se pueda ver hasta donde se extiende el color de fondo del párrafo gracias a la propiedad background-clip.

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:

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 (Cuadricula transparente) 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).

FF - margin y padding en html y body margin y padding en html y body