El modelo de capas de background y el orden de pintado

background no es una propiedad: son ocho, y todas menos una aceptan una lista de valores separados por comas que define capas independientes. Ese modelo convierte un elemento en un lienzo de composición sin pseudoelementos ni marcado extra, y trae dos reglas contraintuitivas —el orden de pintado invertido y el reciclado de listas cortas— que explican casi todos los fondos que salen mal.

Qué forma una capa

Una capa de fondo es la combinación de siete propiedades que se aplican a una imagen:

La octava, background-color, es distinta: no acepta lista. Hay un solo color de fondo por elemento, y siempre se pinta debajo de todas las capas de imagen.

Cuando escribes varias imágenes separadas por comas, cada una crea una capa, y las siete propiedades restantes se emparejan por posición con esas imágenes.

.superficie {
  background-image:
    radial-gradient(circle closest-side, #ffffff30, transparent),
    linear-gradient(in oklab to bottom, #1e1e2e, #11111b);
  background-position: 20% 0, center;
  background-size: 60% auto, cover;
  background-repeat: no-repeat, no-repeat;
  background-color: #11111b;
}

El orden de pintado

Esta es la regla que sorprende: la primera capa de la lista es la que queda más cerca del lector. Las siguientes se pintan debajo, en orden, y el color de fondo queda al final del todo.

flowchart TB
A[Mas cerca del lector] --> B[Borde del elemento]
B --> C[Capa 1 la primera de la lista]
C --> D[Capa 2]
D --> E[Capa 3 la ultima de la lista]
E --> F[background-color siempre al fondo]
F --> G[Lo que haya detras del elemento]
style B fill:#cba6f7,color:#11111b
style C fill:#89b4fa,color:#11111b
style D fill:#89b4fa,color:#11111b
style E fill:#89b4fa,color:#11111b
style F fill:#94e2d5,color:#11111b

Es el mismo orden que un z-index implícito y decreciente, y es el contrario del que usa box-shadow, donde la primera sombra de la lista también va encima, pero también el contrario de lo que hace la mayoría de la gente al escribir: se tiende a listar del fondo hacia arriba, como se apilan las capas en un editor gráfico, y sale al revés.

La regla mnemotécnica que funciona: lo que escribes primero es lo que ves primero. El brillo va arriba en el código porque va arriba en la pantalla; la base va al final.

El borde se pinta por encima de todas las capas de fondo, lo cual importa cuando el borde es semitransparente: verás el fondo a través de él.

Dónde va el color

En la forma larga, background-color es una propiedad aparte y se puede declarar donde quieras. En la forma abreviada hay una restricción sintáctica: el color solo se puede escribir en la última capa de la lista.

/* Valido: el color va en la ultima capa. */
.a {
  background:
    radial-gradient(circle, #ffffff20, transparent) no-repeat,
    linear-gradient(in oklab, #1e1e2e, #11111b) #11111b;
}

/* Invalido: el color en la primera capa. */
.mal {
  background:
    #11111b radial-gradient(circle, #ffffff20, transparent),
    linear-gradient(in oklab, #1e1e2e, #11111b);
}

La razón es que el color no es una propiedad de capa, así que la gramática necesita un sitio único e inequívoco donde ponerlo, y eligió el final. En la práctica es más legible declararlo aparte:

.a {
  background-color: #11111b;
  background-image:
    radial-gradient(circle, #ffffff20, transparent),
    linear-gradient(in oklab, #1e1e2e, #11111b);
  background-repeat: no-repeat;
}

El reciclado de listas

Las listas de las siete propiedades de capa no tienen por qué medir lo mismo que la de imágenes, y la regla de ajuste es asimétrica:

Si una lista es más corta, se recicla desde el principio. Con tres imágenes y background-repeat: no-repeat, repeat, la tercera imagen usa no-repeat, porque se vuelve al primer valor.

Si una lista es más larga, sobra y se ignora. Con dos imágenes y cuatro posiciones, las dos últimas posiciones no hacen nada. No es un error y no avisa.

El reciclado se aprovecha para no repetir:

.tres-capas {
  background-image: url(a.avif), url(b.avif), url(c.avif);
  background-repeat: no-repeat;      /* las tres */
  background-size: contain;          /* las tres */
  background-position: left, center, right;
}

Y es también el origen de errores muy difíciles de ver: si añades una cuarta imagen a un fondo con tres posiciones, la cuarta hereda la posición de la primera sin que nada indique que ha pasado.