Básico de CSS3 – Múltiplos Backgrounds

Conceito básico de multipos BGs em seu site

A sintaxe é muito simples. Na verdade, é idêntica a sintaxe existente. Segue abaixo:

#starter.feature {
 background-attachment: scroll;
 background-clip: border-box;
 background-color: transparent;
 background-image:
 url("../../img/zamboni/discovery_pane/promos/starter-bg-left.png?08a7e8e"),
 url("../../img/zamboni/discovery_pane/promos/starter-bg-right.png?4c37c44"),
 url("../../img/zamboni/discovery_pane/promos/starter-bg.png?55314a1");
 background-origin: padding-box;
 background-repeat:
 no-repeat,
 no-repeat,
 repeat-x;
 }

background-position:
 -5% 100%,
 100% 0pt,
 50% 100%;
 

É tão simples que dispensa grandes explicações. No exemplo acima foi utilizado 3 imagens de BG sendo que duas alinhadas a direita e esquerda que não se repete e uma que se repete horizontalmente e suas devidas posições.