Usando múltiples fondos con CSS

Con CSS3, puedes aplicar múltiple fondos a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.

Especificar fondos múltiples es fácil:

css
.myclass {
  background:
    background1,
    background 2,
    ...,
    backgroundN;
}

Puedes hacerlo con la propiedad atajo background y con las propiedades individuales, excepto background-color. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

Ejemplo

En este ejemplo, tres fondos son apilados: el logo de Firefox, un gradiente lineal, y una imagen de burbujas:

HTML

html
<div class="multi_bg_example"></div>

CSS

css
.multi_bg_example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png),
    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
  background:
    -moz-linear-gradient(
      to right,
      rgba(30, 75, 115, 1),
      rgba(255, 255, 255, 0)
    ),
    -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}

Resultado

(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)

Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente (background-repeat y background-position) aplican a los fondos correspondientes. Así, el primer valor en la lista para background-repeat aplica al primer fondo (el de hasta arriba), etc.

Véase también