- Blog
- Programmazione
- CSS
- CSS3 - Avanzato - Sfondi
CSS3 - Avanzato - Sfondi
- Programmazione
- CSS
- Giuseppe Ventura
- 17/10/2023
In questo articolo impareremo come aggiungere più immagini di sfondo a un elemento.
Impareremo anche a conoscere le seguenti proprietà:
background-sizebackground-originbackground-clip
Sfondi multipli CSS
I CSS ti consentono di aggiungere più immagini di sfondo per un elemento, tramite la proprietà background-image.
Le diverse immagini di sfondo sono separate da virgole e le immagini sono impilate una sopra l'altra, dove la prima immagine è più vicina allo spettatore.
L'esempio seguente ha due immagini di sfondo, la prima immagine è un fiore (allineato in basso a destra) e la seconda immagine è uno sfondo di carta (allineato all'angolo in alto a sinistra):
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
È possibile specificare più immagini di sfondo utilizzando le singole proprietà dello sfondo (come sopra) o la proprietà abbreviata background.
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
Dimensioni dello sfondo CSS
La proprietà CSS background-size consente di specificare la dimensione delle immagini di sfondo.
La dimensione può essere specificata in lunghezze, percentuali o utilizzando una delle due parole chiave: contiene o copre.
L'esempio seguente ridimensiona un'immagine di sfondo molto più piccola dell'immagine originale (utilizzando i pixel):
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Gli altri due valori possibili per background-size sono contain e cover.
La parola chiave contain ridimensiona l'immagine di sfondo per renderla quanto più grande possibile (ma sia la sua larghezza che la sua altezza devono rientrare nell'area del contenuto). Pertanto, a seconda delle proporzioni dell'immagine di sfondo e dell'area di posizionamento dello sfondo, potrebbero esserci alcune aree dello sfondo che non sono coperte dall'immagine di sfondo.
La parola chiave cover ridimensiona l'immagine di sfondo in modo che l'area del contenuto sia completamente coperta dall'immagine di sfondo (sia la sua larghezza che l'altezza sono uguali o superiori all'area del contenuto). Pertanto, alcune parti dell'immagine di sfondo potrebbero non essere visibili nell'area di posizionamento dello sfondo.
L'esempio seguente illustra l'uso di contain e cover:
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Definire le dimensioni di più immagini di sfondo
La proprietà background-size accetta anche più valori per la dimensione dello sfondo (utilizzando un elenco separato da virgole), quando si lavora con più sfondi.
Nell'esempio seguente sono specificate tre immagini di sfondo, con valori di dimensione di sfondo diversi per ciascuna immagine:
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
Immagine di sfondo a grandezza naturale
Ora vogliamo avere un'immagine di sfondo su un sito Web che copra sempre l'intera finestra del browser.
I requisiti sono i seguenti:
- Riempi l'intera pagina con l'immagine (senza spazi bianchi)
- Ridimensiona l'immagine secondo necessità
- Centra l'immagine sulla pagina
- Non causare barre di scorrimento
L'esempio seguente mostra come farlo; Utilizzare l'elemento <html> (l'elemento <html> è sempre almeno pari all'altezza della finestra del browser). Quindi impostare uno sfondo fisso e centrato su di esso. Quindi regolare le dimensioni con la proprietà background-size:
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
Hero Image
Puoi anche utilizzare diverse proprietà di sfondo su un <div> per creare un'immagine hero (un'immagine grande con testo) e posizionarla dove desideri.
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
Proprietà CSS background-origin
La proprietà background-origin CSS specifica dove è posizionata l'immagine di sfondo.
La proprietà assume tre valori diversi:
- border-box - l'immagine di sfondo inizia dall'angolo in alto a sinistra del bordo
- padding-box - (predefinito) l'immagine di sfondo inizia dall'angolo superiore sinistro del bordo di riempimento
- content-box - l'immagine di sfondo inizia dall'angolo in alto a sinistra del contenuto
L'esempio seguente illustra la proprietà background-origin:
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Proprietà CSS background-clip
| Proprietà | Descrizione |
|---|---|
| background | Una proprietà abbreviata per impostare tutte le proprietà dello sfondo in un'unica dichiarazione |
| background-clip | Specifica l'area di pittura dello sfondo |
| background-image | Specifica una o più immagini di sfondo per un elemento |
| background-origin | Specifica dove sono posizionate le immagini di sfondo |
| background-size | Specifica la dimensione delle immagini di sfondo |