É possível adicionar múltiplos backgrounds em um único elemento com CSS.
See the Pen stars by André | Origamid (@origamid) on CodePen.
No exemplo acima eu utilizei 3 backgrounds diferentes e animei posições as suas posições para criar um efeito de Parallax.
Tudo isso foi possível ser feito utilizando uma única div, mantendo assim a nossa marcação limpa.
É bem simples, basta adicionar uma vírgula após os valores da propriedade background e iniciar valores do próximo background.
.multiplos-bgs {
background: url('img-1.png'), url('img-2.png') no-repeat;
}
Neste exemplo apenas a imagem 2 não se repetira, já que os valores adicionados após a vírgula serão aplicados apenas no segundo background.
Eles também são úteis quando você quer adicionar um gradient e uma pattern por cima dele. Exemplo:
.planos {
background: url('../img/pattern.png'), linear-gradient(135deg, #01a7ec, #0186bd);
}
No novo curso de UX Design eu utilizo o exemplo acima para criar o background do VanBook.