Lo sfondo degli elementi è essenziale per creare una buona pagina web. CSS offre diversi modi per scegliere e impostare lo sfondo. Ecco alcuni esempi:
In questa lezione, vediamo le diverse proprietà di background, che si dividono in: background-color, background-image, background-repeat, background-position, background-attachment, background-size.
Puoi impostare un colore di sfondo ad un elemento tramite la proprietà CSS background-color, molto utilizzata nei siti web. Questa proprietà accetta qualsiasi colore CSS (nome, HEX, RGB, ecc.).
Ad esempio, vogliamo inserire uno sfondo rosso ad un <div>:
div {
background-color: DarkRed;
}Puoi anche scegliere un colore di sfondo alla pagina, impostando background-color nel <body>:
body {
background-color: DarkRed;
}Per diminuire l'opacità del colore, e rendere lo sfondo parzialmente trasparente (o completamente), puoi utilizzare i valori di RGBA (che abbiamo visto nella lezione dei colori):
p {
background-color: rgba(255, 0, 0, 0.5); /* Rosso con opacità del 50% */
}Puoi anche utilizzare opacity (che approfondiremo nella lezione sulla visibilità degli elementi), per cambiare l'opacità dell'elemento da 0 a 1, ma tieni presente che tutti gli elementi contenuti all'interno avranno la stessa opacità (quindi anche un eventuale testo si vedrà trasparente):
p {
background-color: red;
opacity: 0.5
}Per impostare un'immagine di sfondo alla pagina o ad un elemento, possiamo usare la proprietà background-image. In questo modo, possiamo specificare il link dell'immagine attraverso la funzione url(), di cui parleremo in dettaglio nella lezione sulla funzione url().
div {
background-image: url('immagine.jpg');
}Nell'esempio, l'immagine si trova nella stessa cartella del file CSS/HTML. Se, invece, è in una posizione differente, allora puoi inserire l'intero link in url().
body {
background-image: url('https://biadets.com/language/css/img/mare.jpg');
}Quando apri per la prima volta una pagina che contiene un'immagine in sfondo ad un elemento, il browser richiede l'immagine al server del sito e poi viene caricata (avviene soltanto sui siti web online, non sul proprio computer). Per questo motivo, quando apri la pagina potresti dover aspettare un po' di tempo per visualizzare l'immagine di sfondo.
Per ovviare a questo problema, puoi impostare anche un colore di sfondo in attesa che l'immagine venga caricata. Ti consigliamo di usare preferibilmente un colore simile a quello dell'immagine.
div {
background-image: url('https://biadets.com/language/css/img/mare.jpg');
background-color: darkblue;
}Per default, l'immagine impostata tramite background-image è ripetuta più volte in modo da ricoprire completamente l'elemento a cui viene attribuita.
Per far sì che l'immagine non venga ripetuta, o per gestire la ripetizione, possiamo utilizzare l'attributo background-repeat. Ecco i valori accettati:
repeat, ripete l'immagine sia in orizzontale che in verticale. È il valore di default.repeat-x, ripete l'immagine solo in orizzontale.repeat-y, ripete l'immagine solo in verticale.no-repeat, non ripete l'immagine, né in verticale né in orizzontale.space, ripete l'immagine quanto basta per riempire l'elemento e lascia spazi vuoti tra le immagini.round, ripete l'immagine quanto basta per riempire l'elemento e ridimensiona le immagini in modo che si adattino perfettamente.div {
background-image: url('immagine.png');
background-repeat: no-repeat;
width: 200px;
height: 200px;
}È possibile combinare due stili diversi per l'asse orizzontale e verticale:
div {
background-image: url('immagine.png');
background-repeat: repeat space;
width: 200px;
height: 200px;
}In quest'ultimo esempio, l'immagine di sfondo viene ripetuta in orizzontale e lascia spazi vuoti in verticale.
La proprietà background-position in CSS definisce la posizione di un'immagine di sfondo all'interno di un elemento. Nella tabella sono elencati i valori accettati da background-position.
| Valore | Descrizione |
left top | Posiziona l'immagine di sfondo nella posizione indicata (ad esempio, in alto a sinistra, al centro a sinistra, ecc.). Se specifichi un solo valore, l'altro sarà automaticamente center. |
50% 40% | Posiziona l'immagine di sfondo in percentuale all'elemento che la contiene. |
10px 20px | Posiziona l'immagine di sfondo ad un numero specificato di px (o un'altra unità di misura) dall'angolo in alto a sinistra. |
Ad esempio, ecco come posizionare l'immagine in basso a destra:
div {
background-image: url('immagine.png');
background-repeat: no-repeat;
background-position: right bottom;
width: 200px;
height: 200px;
}Puoi anche combinare i valori insieme:
div {
background-image: url('immagine.png');
background-repeat: no-repeat;
background-position: left 20px; /* immagine a sinistra e a 20 pixel dal bordo superiore */
width: 200px;
height: 200px;
}La proprietà background-attachment in CSS determina se l'immagine di sfondo si muove con il resto del contenuto della pagina quando si scorre o se rimane fissa in una posizione specifica.
I possibili valori che puoi usare sono:
scroll, il valore predefinito. L'immagine di sfondo scorre insieme al contenuto della pagina.fixed, l'immagine di sfondo rimane fissa rispetto alla finestra del browser, quindi non si muove quando si scorre la pagina.local, l'immagine di sfondo si muove con il contenuto dell'elemento, simile a scroll, ma legato all'elemento che lo contiene con scrolling.Ecco un esempio:
<style>
.contenitore {
background-image: url('immagine.png');
background-attachment: scroll;
width: 200px;
height: 400px;
overflow: auto;
background-repeat: no-repeat;
}
.contenuto {
height: 800px; /* Contenuto più alto del contenitore per abilitare lo scrolling */
}
</style>
<div class="contenitore">
<div class="contenuto">Ciao a tutti</div>
</div>La proprietà background-size in CSS specifica le dimensioni di un'immagine di sfondo. Questa proprietà permette di controllare come l'immagine di sfondo viene "zoomata" all'interno di un elemento.
La proprietà background-size accetta:
auto, l'immagine di sfondo mantiene la sua dimensione originale.cover, ridimensiona l'immagine di sfondo in modo che copra completamente l'elemento, mantenendo le proporzioni originali. Parte dell'immagine potrebbe essere tagliata per adattarsi al contenitore.contain, l'immagine di sfondo viene ridimensionata per adattarsi interamente all'interno dell'elemento, mantenendo le proporzioni originali (così da non deformarla).Ad esempio, per far sì che l'immagine ricopra interamente il <div> che la contiene:
div {
background-image: url('immagine.png');
background-size: cover;
width: 200px;
height: 200px;
}Possiamo anche rendere l'immagine metà del <div> che la contiene:
div {
background-image: url('immagine.png');
background-size: 50% 50%; /* 50% della larghezza e 50% dell'altezza */
width: 200px;
height: 200px;
}Infine, possiamo specificare delle dimensioni per le due grandezze (larghezza e altezza). Ad esempio, vogliamo riempire tutta l'altezza dell'elemento, ma non vogliamo che la proporzione dell'immagine cambi. In questo caso, possiamo fare così:
div {
background-image: url('immagine.png');
background-size: auto 100%;
width: 200px;
height: 200px;
}Nell'esempio, l'immagine verrà tagliata in orizzontale per riempire tutta l'altezza del <div>.
La proprietà background in CSS è una proprietà che permette di impostare tutti i valori delle proprietà individuali del background in un'unica dichiarazione. Le proprietà che possono essere impostate con background sono:
background: background-color background-image background-repeat background-attachment background-position / background-size
L'ordine dei valori in background è importante, quindi è necessario seguire la sintassi, anche se non sono inserite tutte. Inoltre, background-position deve venire prima di background-size, separata da una barra (/).
background: url('immagine.png') center / cover no-repeat;Nell'esempio, background imposta l'immagine di sfondo, la posizione al centro, la dimensione per coprire tutto l'elemento e non ripetere l'immagine.