No CSS3 a propriedade background ganhou várias funções, dentre elas a de definir mais de uma imagem como background em uma única tag.

É bastante simples, veja nos exemplos:

Exemplo 1:

body {
    width: 100%;
    height: 100%;
    margin: 0;
    background:
        url('quadro-vermelho.png') no-repeat center 40%,
        url('quadro-cinza.png') no-repeat center center,
        url('quadro-azul.png') no-repeat center 60%,
        rgba(230,230,230,1)
    ;
}

Nesse exemplo usei três imagens e uma cor de fundo na propriedade background, a primeira imagem adicionada (quadro-vermelho.png) ficará em cima da segunda imagem (quadro-cinza.png) e assim por diante. Como podemos perceber os valores estão separados por vírgula e o ponto e vírgula (;) é adicionado só no fim, fechando assim a propriedade background.

O resultado final fica assim:

Exemplo 2:

body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    margin: 0;
    background:
        url('sol.png') no-repeat center center,
        -webkit-radial-gradient(bottom, rgba(255,255,40,1) 0%,rgba(255,255,40,1) 40%, rgba(255,0,0,1) 80%),
        radial-gradient(ellipse at bottom, rgba(255,255,40,1) 0%,rgba(255,255,40,1) 40%, rgba(255,0,0,1) 80%)
    ;
    background-size: 200px, auto, auto;
}

Nesse outro exemplo usei apenas uma imagem e uma cor de fundo com gradiente na propriedade background.

Os valores das sub-propriedades (background-size, background-repeat, background-position) são correspondentes aos valores da propriedade background, sendo assim, o primeiro valor da sub-propriedade background-size (200px) se aplica ao primeiro valor da propriedade background ("url('sol.png')..."), e assim por diante.

O resultado final fica assim:

Exemplo 3:

body {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    background:
        url('nuvens.png') right top,
        url('montanha.png') center bottom,
        rgba(154,200,238,1)
    ;
    background-repeat: no-repeat;
    background-size: 80%, cover;
    animation: nuvem 20s infinite linear;
    animation-direction: alternate;
}

body::after {
    overflow: hidden;
    content: "";
    display: block;
    position: absolute;
    left: -200px;
    right: -200px;
    bottom: 10px;
    padding: 0 200px;
    width: 100%;
    height: 18%;
    background: url('carro.png') no-repeat;
    background-size: contain;
    background-position: right center;
    animation: carro 4s infinite linear;
    animation-direction: normal;
}

@keyframes nuvem {
    0% {
        background-position: 0 0, center bottom;
    }
}

@keyframes carro {
    0% {
        background-position: 0 0;
    }
}

Aqui usei duas imagens (montanha.png e nuvens.png), uma cor de fundo na tag body e animei a nuvem para criar um efeito de movimento, assim como na pseudo-classe :after (também na tag body) onde criei uma animação para o carro seguir pela estrada, que pode ser visto mais embaixo.

Na propriedade background não há novidades, é igual nos exemplos anteriores, duas imagens cada uma com seus respectivos positions e a cor de fundo em rgba. O que muda é a forma como atribui o repeat das imagens, poderia ter usado: "no-repeat, no-repeat", mas como as duas imagens terão o mesmo valor simplifiquei usando um único no-repeat, que serve para todos os valores inseridos na propriedade background.

O background-size é atribuido da mesma forma que o "Exemplo 2", como as imagens terão tamanhos diferentes inseri os dois valores separados por vírgula.

Veja o resultado final (com animação) clicando aqui.

Resumindo: é um processo muito simples, adicionar uma vírgula após cada valor da propriedade background e fazer o mesmo nas sub-propriedades (background-repeat, background-position, background-size, etc.).