¿Es posible aplicar múltiples imágenes de fondo a un solo elemento HTML con CSS?

Sí, es posible aplicar múltiples imágenes de fondo a un solo elemento HTML utilizando CSS. Esto te permite crear efectos de capas, superponer patrones, o combinar imágenes con gradientes de formas creativas.

La clave para hacerlo es especificar varias imágenes (o también degradados, ya que se tratan como imágenes en este contexto) en la propiedad background-image, separándolas por comas.

La primera imagen que listes en la declaración será la que se coloque más arriba y las imágenes subsiguientes se apilarán detrás de ella, en el orden en que las declares.

Cuando utilizas múltiples imágenes de fondo, también puedes proporcionar una lista de valores (separados por comas) para las otras propiedades de fondo relacionadas, como:

• background-repeat
• background-position
• background-size
• background-attachment
• background-clip
• background-origin

El primer valor de cada una de estas propiedades se aplicará a la primera imagen declarada en background-image, el segundo valor a la segunda imagen, y así sucesivamente. Si proporcionas menos valores en una de estas propiedades que el número de imágenes, la lista de valores se repetirá desde el principio según sea necesario. Si proporcionas más, los valores sobrantes se ignorarán.

Solo se puede definir un background-color, que se dibujará debajo de todas las imágenes de fondo.

Ejemplo:

.mi-elemento-con-multiples-fondos {
  width: 100%;
  height: 400px;
  border: 2px solid #333;

  /* Lista de imágenes de fondo, separadas por comas */
  background-image: url('imagenes/logo-pequeno.png'), /* Imagen superior */
                    url('imagenes/patron-sutil.png'),  /* Imagen intermedia */
                    linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(0,0,0,0.7)); /* Gradiente de fondo */

  /* Valores correspondientes para cada imagen */
  background-repeat: no-repeat,             /* Para logo-pequeno.png */
                     repeat,                /* Para patron-sutil.png */
                     no-repeat;             /* Para el gradiente */

  background-position: top right,             /* Para logo-pequeno.png (arriba a la derecha) */
                       0 0,                   /* Para patron-sutil.png (desde arriba a la izquierda) */
                       0 0;                   /* Para el gradiente (cubre todo) */

  background-size: 80px auto,             /* Para logo-pequeno.png (80px de ancho, alto automático) */
                   auto,                  /* Para patron-sutil.png (tamaño original) */
                   cover;                 /* Para el gradiente (cubre el área) */

  /* Un único color de fondo que se mostrará detrás de todo si las imágenes tienen transparencia */
  background-color: lightblue;
}Lenguaje del código: PHP (php)

En este ejemplo, el logo pequeño aparecerá sin repetirse en la esquina superior derecha, sobre un patrón sutil que se repite, y todo ello sobre un degradado que va de semitransparente a más oscuro. El background-color azul claro se vería si alguna capa superior fuera transparente.