HTML and CSS Reference
In-Depth Information
width: 500pt;
height: 250pt;
border: 1px solid #000;
background:
url(airplane.png) 230pt 100pt no-repeat,
url(cloud.png) 280pt 65pt no-repeat,
url(cloud.png) 330pt 25pt no-repeat,
url(cloud.png) 80pt 25pt no-repeat,
url(sun.png) 20pt 15pt no-repeat,
#0667b5;
}
Nell'esempio 6.7
le immagini si sovrappongono parzialmente, per cui l'ordine di dichia-
razione degli sfondi risulta fondamentale: al livello più alto (in primo piano) troviamo
l'aeroplano, in quanto è la prima immagine dichiarata, e poi via via tutti gli altri. Il risultato
finale è visibile nella
figura 6.4
.
Figura 6.4
- Background multipli.
Ogni immagine di sfondo può inoltre essere ridimensionata usando la proprietà
background-size
; per indicare le dimensioni delle singole immagini, dobbiamo sem-
plicemente inserire le coppie di valori (larghezza e altezza) separate da virgola, rispettando
l'ordine usato nella definizione della proprietà
background-image
. Impostando
background-size: cover;
l'immagine verrà ridimensionata (mantenendo inaltera-
te le proporzioni), in modo che il valore più
piccolo
tra larghezza e altezza sia pari alla di-
mensione del contenitore. Con
background-size: contain;
l'immagine verrà in-
vece ridimensionata (sempre rispettandone le proporzioni), in modo che il valore più
gran-
de
tra larghezza e altezza sia pari alla dimensione del contenitore. La
figura 6.5
mostra al-
cuni esempi di ridimensionamento dell'immagine di sfondo: il contenitore ha dimensioni
fissate a 200x150 e l'immagine del sole originale è di 128x126.
