Corso HTML e CSS (22^ lezione): CSS: Box model (5^parte)

Impariamo a costruire un sito Web

Lezione 22: CSS: Box model (5^parte).

 

Vediamo ora tutte le proprietà che possiamo usare per descrivere lo sfondo di un box.

b) Colori, sfondi e dimensioni


background Permette di impostare con un unica dichiarazioni tutte le differenti proprietà per lo sfondo. Queste sono:

color, position, size, repeat, origin, clip, attachment, image

Per i valori che questi attributi possono assumere vedere le singole dichiarazioni di:

 

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

 

background-attachment Effettua la gestione dello scrolling di un’immagine di sfondo.

I valori che questa proprietà può assumere sono:

scroll L’immagine di sfondo deve fare lo scrolling come il resto della pagina. Default.
fixed L’immagine di sfondo è fissa.
inherit Specifica che il comportamento che l’immagine di sfondo  deve avere sarà ereditato dall’elemento padre.

Es d’uso:

background-attachment:fixed;

L’immagine di sfondo resterà fissa mentre il resto della pagina potrà scorrere.

background-color Imposta il colore di sfondo di un elemento.

I valori che questa proprietà può assumere sono:

colore Specifica il colore dello sfondo. Il colore può essere espresso con un nome, un codice esadecimale o con i valori rgb. La tabella dei colori la potete trovare qui.
transparent Specifica che lo sfondo è trasparente. Default.
inherit Specifica che il colore dello sfondo è ereditato dal padre.

 

Es d’uso:

background-color: rgb(255,0,255;

Così si assegna il colore magenta allo sfondo.

background-image Imposta una o più immagini di sfondo. Se si impostano più immagini, quella al livello superiore sarà la prima.

I valori che questa proprietà può assumere sono:

url(‘URL’) URL dell’immagine. Per specificarne più di una, separare gli URL con una virgola.
none Nessuna immagine di sfondo. Default
inherit Specifica che l’immagine di sfondo sarà ereditata dall’elemento padre.

Es d’uso:

background-image:url(‘body_bg.jpg’);

background-position Imposta il posizionamento dell’immagine di sfondo.

I valori che questa proprietà può assumere sono:

left top Se si specifica una sola parola , si assume che l’altra sia ‘center’
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y% Il primo valore indica la posizione orizzontale, mentre il secondo quella verticale. Il margine in alto a sinistra è 0% 0%, quello in basso a destra 100% 100%. Se si specifica un solo valore l’altro si assumerà sia 50%. Il default è: 0% 0%.
xpos ypos Il primo valore indica la posizione orizzontale, mentre il secondo quella verticale.  Il margine in alto a sinistra è 0 0. L’unità di misura può essere pixels (0px 0px) o qualsiasi altra unità di misura ammessa nei CSS come per esempio em e %. Se si specifica un solo valore l’altro si assumerà sia 50%. Si possano mischiare valori espressi in % e in valore assoluto.
inherit Specifica che la posizione dell’immagine di sfondo è ereditata dal padre.

Es d’uso:

background-color:yellow;

width:60px;

height:60px;

background-image :url(‘loading.gif’);

background-position:center;

background-repeat: no-repeat;

Il risultato sarà:

 

background-repeat Imposta la ripetizione di un’immagine di sfondo.

I valori che questa proprietà può assumere sono:

repeat L’immagine di sfondo sarà ripetuta sia orizzontalmente, sia verticalmente. Questo è il default.
repeat-x L’immagine di sfondo sarà ripetuta solo orizzontalmente
repeat-y L’immagine di sfondo sarà ripetuta solo verticalmente.
no-repeat L’immagine di sfondo non sarà ripetuta.
inherit Specifica che il valore di questa proprietà sarà eraditato dall’elemento padre.

Es d’uso:

background-image:url(‘body_bg.jpg’);

background-repeat:repeat;

Se assegnamo queste proprietà al body riempiremo lo schermo con quello sfondo ripetuto nelle due direzioni sino a completo riempimento.

background-origin Specifica il posizionamento dell’immagine di sfondo.

Questa proprietà in Internet Explorer è supportata solamente dalla versione 9.

I valori che questa proprietà può assumere sono:

padding-box L’immagine di sfondo è posizionata relativamente al contorno interno (padding)
border-box L’immagine di sfondo è posizionata relativamente al bordo del box.
content-box L’immagine di sfondo è posizionata relativamente al contenuto del box.

Es d’uso:

border:1px solid black;

background-image:url(‘loading.gif’);

background-position:left;

background-origin:content-box;

background-repeat:no-repeat;

padding: 30px;

Il risultato sarà:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt condimentum dolor vel fringilla. Vestibulum eros tellus, laoreet nec malesuada a, luctus id velit. Sed at eros eget enim interdum cursus nec interdum ligula. Nunc sed interdum odio.
background-clip Specifica l’area colorata dello sfondo.

Questa proprietà in Internet Explorer è supportata solamente dalla versione 9. Safari supporta l’alternativa: -webkit-background-clip

I valori che questa proprietà può assumere sono:

padding-box L’immagine di sfondo è posizionata relativamente al contorno interno (padding)
border-box L’immagine di sfondo è posizionata relativamente al bordo del box.
content-box L’immagine di sfondo è posizionata relativamente al contenuto del box.

Es d’uso:

border:1px solid black;

background-color:yellow;

background-clip:content-box;

-webkit-background-clip:content-box;

padding: 30px;

Il risultato sarà:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt condimentum dolor vel fringilla. Vestibulum eros tellus, laoreet nec malesuada a, luctus id velit. Sed at eros eget enim interdum cursus nec interdum ligula. Nunc sed interdum odio.
background-size Specifica la grandezza dell’immagine di sfondo.

Questa proprietà in Internet Explorer è supportata solamente dalla versione 9.

I valori che può assumere sono:

lunghezza Imposta altezza e larghezza dell’immagine in background. Il primo valore è la larghezza e il secondo l’altezza. Se viene dato un solo valore, il secondo viene impostato ad “auto”
percentuale Imposta altezza e larghezza dell’immagine in background in percentuale dell’elemento padre. Il primo valore è la larghezza e il secondo l’altezza. Se viene dato un solo valore, il secondo viene impostato ad “auto”.
cover Con background-size: cover; si reimpostano le dimensioni dell’immagine ingrandendole in modo che entrambe siano maggiori od uguali alle dimensioni dell’area in cui deve essere contenuta l’immagine.
contain Con background-size: contain si reimpostano le dimensioni dell’immagine in modo che entrambe siano contenute entro l’area in cui l’immagine è alloggiata.

Es d’uso:

background-size:50px 50px;

ridimensionerebbe l’iimagine di sfondo alle dimensioni 50px-50px.

opacity Imposta l’opacità di un elemento div.

Internet Explorer 8 e precedenti supportano una varinte di questa proprietà:

filter:Alpha(opacity=valore)

I valori che questa proprietà può assumere sono:

valore Specifica l’opacità. Va da 0.0 (transparente) fino a 1.0 (colore pieno)
inherit Il valore dell’opacità sarà ereditato dall’elemento padre.

Es d’uso:

background-color:aqua;

opacity:0.50;

filter:Alpha(opacity=50);

Quest’ultima dichiarazione va aggiunta per chi avesse IE inferiore alla versione 9.

Da notare che tutto il contenuto della <div> sarà soggetto a questo valore di opacità, non solo lo sfondo.

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.