Background (Sfondi)
Le nuove funzionalità consentono un maggiore controllo del elemento di sfondo da fornire
ai progettisti, con tutta una serie di nuove funzionalità.
Background Size (Dimensione sfondo)
Prima di CSS3, le dimensione dello fondo è stata determinato dalla dimensione reale delle immagini utilizzate.
Sarà possibile con la revisione CSS precisare in termini di percentuale o di pixel
un'immagine di sfondo come dovrebbe essere. Questo vi permetterà di riutilizzare le
immagini in diversi contesti diversi e anche espandere uno sfondo per riempire uno spazio più accurato
Ciò che segue è un semplice esempio del
ridimensionamento del logo Design Shack come sfondo nella zona in alto a sinistra di un div:
.backgroundsize {
background: url(http://www.designshack.co.uk/images/logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}
Multiple Backgrounds (Sfondi Multipli)
La nuova capacità di utilizzare più sfondi è un grande risparmio di tempo, permettendo di ottenere
effetti che in precedenza richiedevano più di un div.
L'esempio utilizza uno sfondo per il bordo superiore, una ripetuta verticalmente per il bordo
sinistro e destro e un terzo sul fondo.
.multiplebackgrounds {
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}
