CSS: Fondos

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:  */

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") left top / 100px;
}
/* Imagen de fondo caballo.svg:  */

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

Tenga cuidado al utilizar conjuntamente la propiedad compuesta background y 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 lightgray porque la propiedad background anula la propiedad background-color anterior. En el segundo ejemplo, sí que se ve el color lightgray porque la propiedad background-color está después de la propiedad background.

html {
  background-color: lightgray;
  background: url("gota.png");
}

html {
  background: url("gota.png");
  background-color: lightgray;
}

Imágenes de fondo múltiples

Un elemento puede tener varias imágenes de fondo, simplemente separando entre comas las referencias a cada imagen.

html {
  background: url("fuego-1f525.svg") right repeat-y, url("tartan.png");
}

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

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

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.

html {
  background: url("rosa-1f339.svg") left top repeat-y,
    hwb(105 75% 5%) url("tulipan-1f337.svg") right top repeat-y;
  padding: 0 70px;
}

html {
  background: hwb(105 75% 5%) url("rosa-1f339.svg") left top repeat-y,
    url("tulipan-1f337.svg") right top repeat-y;
  padding: 0 70px;
  /* No es correcto poner color de fondo a una imagen de fondo
     que no sea la última.
  */
}

Color de fondo: background-color

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

html {
  background-color: gold;
}

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: gold url("fuego-1f525.svg");
}

html {
  background: gold url("tartan.png");
}

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: . Esta imagen se llama tartan.png y se encuentra en la misma carpeta que la hoja de estilo.

html {
  background-image: url("tartan.png");
}

html {
  background-image: url("tartan.png");
}

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

Pero si la imagen contiene píxeles transparentes se ve el color de fondo:

html {
  background-color: limegreen;
  background-image: url("gota.png");
}

html {
  background-color: orange;
  background-image: url("gota.png");
}

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

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

p {
  background: url("franja_vertical.png");
}

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:

• auto: el primer valor corresponde al tamaño horizontal y el segundo al tamaño vertical, se conserva el tamaño original de la imagen.
• valores numéricos (porcentajes o distancias): el primer valor corresponde al tamaño horizontal y el segundo al tamaño vertical, la imagen se deforma para ajustarse a esos valores.
• contain: la imagen se aumenta o disminuye de manera que pueda verse completa en una de las dimensiones (horizontal o vertical) y se repita en la otra dimensión.
• cover: la imagen se aumenta o disminuye de manera que ocupe todo el espacio disponible en una dimensión (horizontal o vertical, dependiendo de la cantidad de contenido y el tamaño de la ventana) y se corta en la otra dimensión.

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:

html {
  background-image: url("circulo.svg");
  background-size: auto auto;
}

html {
  background-image: url("circulo.svg");
  background-size: 50px 50px;
}

html {
  background-image: url("circulo.svg");
  background-size: contain;
}

html {
  background-image: url("circulo.svg");
  background-size: contain;
}

html {
  background-image: url("circulo.svg");
  background-size: cover;
}

Si el elemento con fondo es html, el tamaño vertical en porcentaje se interpreta respecto al texto, no respecto a la ventana.

html {
  background-image: url("circulo.svg");
  background-size: 33% 50%;
}

Si el elemento con fondo no contiene texto, el resultado puede no ser el esperado.

html {
  background-image: url("circulo.svg");
  background-size: 33% 50%;
}

html {
  background-image: url("circulo.svg");
  background-size: contain;
}

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:

• no-repeat: la imagen no se repite
• repeat-x: la imagen se repite únicamente en horizontal
• repeat-y: la imagen se repite únicamente en vertical
• repeat: la imagen se repite en horizontal y vertical

La futura recomendación CSS Backgrounds and Borders Module Level 3, actualmente (octubre de 2022) en elaboración, ha añadido los valores:

• space: la imagen se repite en horizontal y vertical, pero se añaden espacios entre las imágenes para mostrar las imágenes completas y que no se corten en los bordes derecho o inferior.
• round: la imagen se repite en horizontal y vertical, pero las imágenes se deforman para mostrarlas completas y que no se corten en los bordes derecho e inferior.

La propiedad background-repeat admite uno o dos valores:

• si sólo se da un valor, el valor se aplica tanto en horizontal como en vertical.
• si se dan dos valores, el primero se aplica en horizontal y el segundo en vertical.

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

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

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

html {
  background-image: url("verde.jpg");
  background-repeat: repeat;
}

html {
  background-image:  url("circulo.svg");
  background-repeat: repeat;
}

html {
  background-image:  url("circulo.svg");
  background-repeat: space;
}

html {
  background-image:  url("circulo.svg");
  background-repeat: round;
}

html {
  background-image:  url("circulo.svg");
  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:

• valores numéricos (porcentajes o distancias)
• left, center y right: establecen la posición horizontal (izquierda, centro y derecha, respectivamente)
• top, center, bottom: establece la posición vertical (arriba, en medio, abajo, respectivamente)

Hay que tener en cuenta que la imagen de fondo se posiciona respecto al elemento y que el tamaño de los elementos puede estar definido explícitamente o definido por su contenido.

• En el ejemplo siguiente se da imagen de fondo a una división <div> cuyo tamaño se establece en la hoja de estilo. La división es lo bastante grande como para ver claramente la imagen de fondo abajo a la derecha.

  div {
    width: 98%;
    height: 10em;
    border: black 1px solid;
    margin-left: auto;
    margin-right: auto;
    background-color: lightblue;
    background-image: url("verde.jpg");
    background-position: right bottom;
    background-repeat: no-repeat;
  }
  
  

  
• En el ejemplo siguiente se da imagen de fondo a una división <div> cuyo tamaño está definido por el texto (y otros elementos) que contiene. La división es más pequeña que la imagen de fondo, por lo que cuesta apreciar que la imagen de fondo está situada abajo a la derecha.

  div {
    border: black 1px solid;
    background-color: lightblue;
  
    background-image: url("verde.jpg");
    background-position: right bottom;
    background-repeat: no-repeat;
  }
  

  
• En el caso de imágenes de fondo (sin repetición) en los elementos <html> o <body>, los navegadores calculan el tamaño basándose en el texto (y otros elementos) que contienen. Sin embargo, el color de fondo se aplica a todo el espacio disponible, independientemente del contenido de la página.

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

  
• Si la página no tiene contenido, cuesta apreciar que la imagen de fondo está situada abajo a la derecha de un contenido inexistente.

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

  

Con respecto a los valores de background-position (posición horizontal y vertical), si se emplean únicamente términos, el orden de los valores no es importante:

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

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

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

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

Si sólo se indica una de las posiciones, la otra toma el valor center.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

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

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: right;
  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.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

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

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

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

Si se emplea un único valor numérico, se interpreta como posición horizontal y valor ausente es 50%.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  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.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  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, ya que la posición no está indicada correctamente. El error es que el primer valor (bottom) no corresponde a una posición horizontal.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: bottom 100%;
  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:

• scroll: la imagen acompaña al elemento cuando este se desplaza
• fixed: la imagen permanece fija

El valor scroll hace que la imagen acompañe al elemento y se puede aplicar en cualquier elemento.

html {
  background-attachment: scroll;
  background-image: url("verde.jpg");
  background-position: right top;
  background-repeat: no-repeat;
}

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

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:

• border-box: el fondo se extiende hasta el borde (borde incluido)
• padding-box: el fondo se extiende hasta el margen interior (el borde no se incluye)
• content-box: el fondo se limita al contenido (no se incluye ni el margen interior ni el borde)
• El comportamiento predeterminado (es decir, cuando no se utiliza la propiedad) es equivalente al valor border-box

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

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

  background-clip: border-box;
}

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

  background-clip: padding-box;
}

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

  background-clip: content-box;
}

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 espacio disponible (al que afecta la propiedad background-clip).

Los posibles valores de la propiedad background-origin son:

• border-box: el origen está en el borde (borde incluido)
• padding-box: el origen está en el margen interior (el borde no se incluye)
• content-box: el origen está en el contenido (no se incluye ni el margen interior ni el borde)

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 {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula-transp.png");
  background-color: lightblue;

  background-origin: border-box;
}

p {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula-transp.png");
  background-color: lightblue;

  background-origin: padding-box;
}

p {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula-transp.png");
  background-color: lightblue;

  background-origin: content-box;
}

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

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.

html {
  background-color: lightblue;
}

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

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

p.con-margen-interior {
  padding: 10px;
}

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 50 por 50px () 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).