Background CSS
Colore di Sfondo
La proprietĂ background-color specifica il colore dello sfondo di un elemento.
Altri Elementi
Puoi impostare il colore di sfondo per qualsiasi elemento HTML:
Trasparenza
La proprietà opacity specifica l’opacità /trasparenza di un elemento. Può avere un valore compreso tra 0,0 e 1,0. Più basso è il valore, più trasparente sarà l’elemento:
Quando si utilizza la proprietà opacity per aggiungere trasparenza allo sfondo di un elemento, tutti i suoi elementi figli erediteranno la stessa trasparenza. Questo può rendere difficile la lettura del testo all’interno di un elemento completamente trasparente.
Se non si desidera applicare l’opacità agli elementi figli, come nell’esempio sopra, è possibile utilizzare valori di colore RGBA.
Immagine di Sfondo
La proprietà background-image specifica un’immagine da utilizzare come sfondo di un elemento.
Per default, l’immagine viene ripetuta in modo da coprire l’intero elemento.
Quando si utilizza un’immagine di sfondo, utilizzare un’immagine che non disturbi il testo.
L’immagine di sfondo può anche essere impostata per elementi specifici, come l’elemento <p>
:
Ripetere lo sfondo
Per default, la proprietà background-image ripete un’immagine sia in orizzontale che in verticale.
Alcune immagini dovrebbero essere ripetute solo in orizzontale o in verticale, altrimenti sembreranno strane, come in questo esempio:
Se l’immagine sopra è ripetuta solo in orizzontale (background-repeat: repeat-x;), lo sfondo avrà un aspetto migliore:
Per ripetere un’immagine in verticale, imposta background-repeat: repeat-y;
Non ripetere lo sfondo
Mostrare l’immagine di sfondo solo una volta è specificato anche dalla proprietà background-repeat:
Nell’esempio sopra, l’immagine di sfondo è posizionata nello stesso punto del testo. Vogliamo cambiare la posizione dell’immagine, in modo che non disturbi troppo il testo.
Posizione dello sfondo
La proprietà background-position viene utilizzata per specificare la posizione dell’immagine di sfondo.
Posiziona l’immagine di sfondo nell’angolo in alto a destra:
Comportamento sullo Scroll
La proprietà background-attachment specifica se l’immagine di sfondo dovrebbe scorrere o rimanere fissa (non scorrerà con il resto della pagina):
Specifica che l’immagine di sfondo dovrebbe essere fissa: