CSS3 multiple backgrounds

Più di un background Tra le innumerevoli piccole e grandi novità di CSS3 una che ha colpito la nostra fantasia […]
CSS3 multiple backgrounds

Più di un background

Tra le innumerevoli piccole e grandi novità di CSS3 una che ha colpito la nostra fantasia è la possibilità di specificare più di una immagine di background nel nostro CSS.

In concreto

Il tutto è davvero molto semplice: nella forma “base” basta un codice del genere

body{
    background-image: url(/images/css3.png), url(/images/bluesky.png);
    background-position: 30px 10px, 0 0;
    background-repeat: no-repeat, repeat-x;
}

per ottenere questo:

CSS3 Multiple backgrounds

Sintetizziamo il codice

Inoltre è possibile utilizzare anche la forma più sintetica, ma se le immagini iniziano ad essere numerose il codice diventerà più complicato in fase di lettura e usabilità.

body{
    background: url(/images/5.png) 30px 10px no-repeat, url(/images/bluesky.png) 0 0 repeat-x;
}

Inoltre è possibile applicare delle animazioni ai nostri background multipli.

Il supporto?

Per quanto riguarda il supporto da parte dei browser, a questo link potete visualizzare la tabella delle versioni compatibili.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github