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.

Cualquier imagen puede utilizarse de imagen de fondo. Para adaptarse a los diferentes tamaños de pantallas y mantener las imágenes lo más pequeñas posibles, si el elemento es mayor que la imagen, las imágenes se suelen repetir. Si la imagen está bien construida, la repetición puede dar un resultado contínuo.

Imagen de fondo: Imagen de ejemplo para fondo

ERROR (no puede mostrarse el objeto)

Imagen de fondo: Imagen de ejemplo para fondo

ERROR (no puede mostrarse el objeto)

Nota: En la lección Generadores de fondos se comentan varias aplicaciones y páginas web que facilitan la creación de imágenes de fondo.

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-size, background-repeat, background-attachment, background-origin y background-clip (explicadas más adelante en esta página).

html {
  background: lightblue url("caballo.svg");
}

/* Imagen de fondo caballo.svg: Imagen de ejemplo para fondo */

ERROR (no puede mostrarse el objeto)

Para evitar ambigüedades, si se especifica la propiedad background-size, inmediatamente antes se debe especificar la propiedad background-position y antes de background-size hay que escribir una barra (/).

html {
   background: lightblue url("caballo.svg") top left / 100px;
}

/* Imagen de fondo caballo.svg: Imagen de ejemplo para fondo */

ERROR (no puede mostrarse el objeto)

Si sólo se escribe un valor de background-origin y background-clip, ese valor se aplica a las dos propiedades.

Imágenes de fondo múltiples

La futura recomendación CSS 3: Fondos y bordes, actualmente (diciembre de 2016) en elaboración, permite definir varias imágenes de fondo en un mismo elemento, simplemente separando entre comas las referencias a cada imagen.

html {
  background: url("fuego_1f525.svg") right repeat-y, url("tartan.png");
}
ERROR (no puede mostrarse el objeto)

La notación de valores separados por comas se puede utilizar tanto en la propiedad compuesta background como en las propiedades individuales. Si sólo se especifica un valor, ese valor se aplica a todas las imágenes.

html {
  background-image: url("fuego_1f525.svg"), url("tartan.png");
  background-position: right;
  background-repeat: repeat-y, repeat;
}
ERROR (no puede mostrarse el objeto)

El orden de las imágenes es de delante hacia atrás, es decir, la primera imagen de la lista está por encima de la segunda y así sucesivamente. El orden es importante pues si una imagen no tien transparencia tapará las siguientes. En el ejemplo siguiente el fondo que asemeja una tela oculta la imagen del fuego:

html {
  background: url("tartan.png"), url("fuego_1f525.svg") right repeat-y;
}
ERROR (no puede mostrarse el objeto)

Sólo se puede definir un color de fondo en la última de las imágenes de fondo. No solamente porque dar color de fondo a cualquier otra imagen ocultaría las que se encuentran por detrás, sino porque la recomendación no lo permite.

Correcto
html {
  background: url("rosa_1f339.svg") top left repeat-y,
    hsl(105, 80%, 85%) url("tulipan_1f337.svg") top right repeat-y;
  padding: 0 70px;
}
ERROR (no puede mostrarse el objeto)
Incorrecto
html {
  background: hsl(105, 80%, 85%) url("rosa_1f339.svg") top left repeat-y,
    url("tulipan_1f337.svg") top right repeat-y;
  padding: 0 70px;
  /* No es correcto poner color de fondo a una imagen de fondo
     que no sea la última.
  */
}
ERROR (no puede mostrarse el objeto)

Para saber más: 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.

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

El color de fondo se muestra por detrás de la imagen, por lo que la imagen debe tener transparencia para que se pueda ver el color de fondo.

html {
  background: #FFDF85 url("fuego_1f525.svg");  }
}
ERROR (no puede mostrarse el objeto)
html {
  background: #FFDF85 url("tartan.png"); }
}
ERROR (no puede mostrarse el objeto)

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.

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

html {
  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:

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

Se aconseja utilizar o bien solamente la propiedad compuesta background o bien las propiedades individuales. Si se utiliza la propiedad compuesta background y además las propiedades individuales, es necesario escribir primero la propiedad compuesta, 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.

html {
  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.
html {
  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");
  color: red;
}

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.

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:

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

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

El valor space introducido en CSS 3 tiene sentido con imágenes que no pretenden crear un fondo continuo, ya que el espacio sobrante se distribuye entre las imágenes.

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.

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

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 cuadrícula de 50x50px (Cuadrícula 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