Con le numerose proprietà background possiamo impostare uno sfondo ad uno o più elementi e dettarne la tipologia ed il comportamento
Elenchiamo tutte le proprietà disponibili:
| background-color | impostiamo un colore di sfondo |
| background-image | impostiamo un immagine di sfondo |
| background-repeat | definiamo il ripetersi dello sfondo e la sua direzione |
| background-attachment | definiamo il suo comportamento: fixed (fisso) o scroll (scorrevole) |
| background-position | definiamo il punto in cui verrà piazzata un’immagine di sfondo |
| background-clip | stabilisce fin dove deve estendersi lo sfondo (box model) |
| background-origin | stabilisce da dove deve iniziare lo sfondo (box model) |
| background-size | impostare le dimensioni delle immagini usate come sfondo |
Impostare un colore di fondo
Sintassi:
SELETTORE { BACKGROUND-COLOR: VALORE; }
Valori possibili:
| colore | definiamo il colore hex, rgb ecc. |
| trasparent | trasparente |
.classe {
background: red; }
.classedue {
background: trasparent; }
Impostare un immagine di fondo
Sintassi:
SELETTORE { BACKGROUND-IMAGE: URL(FILE.JPG); }
Valori possiibli:
| url immagine | percorso dell'immagine |
| none | disabilità/non impostare fondo |
.classe {
background-image: url(immagine.jpg); } /* il file risiede nella stessa root */
#id {
background-image: url(http://www.sito.it/immagini/immagine.jpg); } /* percorso immagine specifico anche esterno al sito */
div {
background-image: none; } /*se presente un immagine di sfondo non mostrarla */
Nel modulo CSS3 viene aggiunta la possibilità di impostare un gradiente come immagine di sfondo.
Il primo tipo di gradiente è quello lineare
div{
background-image: linear-gradient(to top right, #FFFFFF 0%, #AACFEF 100%);
}
Valori possibili:
toptop lefttop rightbottombottom leftbottom rightleftrightNote: Prima dei valori per la direzione dei gradienti lineari è necessario indicare la parola "to".
Insieme al codice relativo al colore inziale (#FFFFFF), si definisce pure il valore di offset (0%).
Il valore di offset serve a specificare in quale punto della linea del gradiente il colore di stop dovrà comparire.
Il secondo colore e/o i successivi dovranno contenere anch'essi un valore di offset, tenendo conto, che l'ultimo colore dovrà essere impostato con offset al 100%.
div{
background-image: linear-gradient(to top right, #FFFFFF 0%, #DF15AA 50%, #AACFEF 100%);
}
Similmente al gradiente-lineare abbiamo la possibilità di creare un gradiente-radiale.
div{
background-image: radial-gradient(center, circle, #FFFFFF 0%, #00A3EF 100%);
}
Possibili valori per i punti d'origine dei radiali:
Valori possibili per impostare la forma del gradiente radiale
L’espressione si chiude con la definizione dei colori, anche in questo caso con l’impostazione del valore di offset.
Impostiamo il comportamento di ripetizione di uno sfondo
Sintassi:
SELETTORE { BACKGROUND-REPEAT: VALORE; }
Valori possibili:
| repeat | ripeti l'immagine di sfondo sia lungo l'asse x sia lungo l'asse y |
| repeat-x | ripeti l'immagine di sfondo solo lungo l'asse x (orizzontalmente) |
| repeat-y | ripeti l'immagine di sfondo solo lungo l'asse y (verticalmente) |
| no-repeat | non ripetere |
.classe {
background-immage: url(immagine.jpg); } /* impostiamo immagine di sfondo */
background-repeat: repeat-x; /*ripeti immagine solo orizzontamente */
}
#id {
background-immage: url(immagine.jpg); } /* impostiamo immagine di sfondo */
background-repeat: no-repeat; /* non ripetere */
}
Impostiamo il comportamento dello sfondo rispetto all'elemento a cui è applicata.
Più semplicemente, definiamo se lo sfondo debba essere fisso o debba scorrere assieme al contenuto
Sintassi:
SELETTORE { BACKGROUND-ATTACHMENT: VALORE; }
Valori possibili:
| scroll | scorre con il resto del documento quando si fa lo scrolling della pagina |
| fixed | rimane fissa mentre il documento scorre |
.classe {
background-image: url(image.jpg);
background-attachment: fixed;
}
Impostiamo tramite coordinate la posizione dove posizionare lo sfondo all'interno di un elemento
Sintassi:
SELETTORE { BACKGROUND-POSITION: VALORE; }
Valori possibili:
| valore in percentuali | il posizionamento è definito con valori percentuali es. 50% |
| valori con unità di misura | il posizionamento è definito con valori di unità di misura es. 50px |
| parole chiavi | top, left, bottom, right e center |
I valori saranno espressi in coppia e si riferiranno all'asse x e all'asse y
div .classe {
background-image: url(immagine.jpg);
background-position: 50% 50%; /* 50% asse y rispetto al suo container & 50% asse x sempre rispetto al suo container */
}
div .classedue {
background-image: url(immagine.jpg);
background-position: 10px 10px; /* 50 pixel asse y rispetto al suo container & 50 pixel asse x sempre rispetto al suo container */
}
div .classetre {
background-image: url(immagine.jpg);
background-position: top left; /* l'immagine si posizionera nella porzione alta (top) a sinistra (left) */
}
La proprietà consente di stabilire se lo sfondo debba estendersi fino a comprendere il bordo oppure no.
Ecco i possibili valori che fanno riferimento alla gestione del design del box model:
border-box | lo sfondo si estende fino ai bordi |
padding-box | lo sfondo si estende fino all'area che include il padding |
content-box | lo sfondo si estende al solo contenuto (content) |
div{
background-color: blue;
background-clip: content-box;
}
La proprietà background-origin serve a specificare relativamente a quale area di un elemento avviene il posizionamento di un’immagine di sfondo.
Note: mentre la proprietà background-clip indica fin dove si estende lo sfono in relazione al box model, la proprietà background-origin indica da dove parte/viene applicato lo sfondo.
Medesimi valori possibili:
border-box | lo sfondo inizia dai bordi |
padding-box | lo sfondo inizia dall'area che include il padding |
content-box | lo sfondo inizia dal solo contenuto (content) |
La proprietà background-origin è usata sempre in combinazione con le proprietà background-image e background-position.
Non può essere applicata quando e se la proprietà background-attachment è impostata sul valore fixed.
div{
background-image: url(image.jpg);
background-position: top left;
background-origin: padding-box;
}
La proprietà background-size serve a impostare le dimensioni delle immagini usate come sfondo.
La proprietà può assumere quattro tipi di valori:
cover;contain.div{
background-image: url(image.jpg);
background-size: 50% 100%;
}
Se si usano le percentuali o le dimensioni in unità di misura, si possono esprimere due valori: il primo imposta la larghezza, il secondo l’altezza. Se si usa un unico valore, il secondo assumerà valore auto.
Se si usa cover, l’immagine viene ridimensionata per coprire interamente l’elemento a cui viene applicata.
Se si usa contain, invece, l’immagine viene ridimensionata per adattarsi all’area dell’elemento cui viene applicata.
div{
background-image: url(image.jpg);
background-size: cover;
}
Le nuove specifiche CSS3 definiscono nuove proprietà per gli sfondi e potenziano quelle esistenti dandoci la possibilità di inserire molteplici immagini per lo sfondo.
div{
background-image: url(immagine1.jpg), url(immagine2.jpg);
background-position: top left, bottom left;
background-repeat: no-repeat, no-repeat;
}
Come visibile nel codice css qui sopra è ora possibile indicare nelle varie proprietà più valori separati dalla virgola.
L'ordine di inserimento delle immagini in background-image determina ed associa, nel medesimo ordine, i valori contenuti nelle altre regole.
Le immagini definite nella regola background-image sono automaticamente inserite su più livelli;
La precedente si posiziona su di un livello superiore rispetto alla successiva.
Anche in questo caso è possibile definire le regole per gli sfondi multipli con una shorthand.
body{
background-image:
url(immagine1.jpg) top left no-repeat,
url(immagine2.jpg) bottom left no-repeat,
url(immagine3.jpg) top right no-repeat;
}