Le proprietà dello sfondo CSS vengono utilizzati per definire gli effetti di sfondo per gli elementi.
proprietà dello sfondo CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Colore di sfondo
Il background-color proprietà specifica il colore di sfondo di un elemento.
Il colore di sfondo della pagina è impostato in questo modo:
Con CSS, un colore è più spesso specificato da:
- un nome di colore valido - come "red"
- un valore esadecimale - come "#ff0000"
- un valore RGB - come "rgb(255,0,0)"
Guardate i valori di colore CSS per un elenco completo dei possibili valori di colore.
Nell'esempio che segue, il <h1>, <p> , e <div> elementi hanno diversi colori di sfondo:
Esempio
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Prova tu stesso " Immagine di sfondo
Il background-image proprietà specifica un'immagine da utilizzare come sfondo di un elemento.
Per default, l'immagine viene ripetuta in modo da coprire l'intero elemento.
L'immagine di sfondo per una pagina può essere impostata in questo modo:
Di seguito è riportato un esempio di una pessima combinazione di immagine di sfondo del testo e. Il testo è difficilmente leggibile:
 | Nota: Quando si utilizza un'immagine di sfondo, usare un'immagine che non disturba il testo. |
|---|
Immagine di sfondo - Ripetere orizzontale o verticale
Per impostazione predefinita, il background-image proprietà ripete un'immagine sia orizzontalmente che verticalmente.
Alcune immagini devono essere ripetuti solo orizzontalmente o verticalmente, o saranno sembrare strano, in questo modo:
Se l'immagine qui sopra è ripetuta solo orizzontalmente ( background-repeat: repeat-x; ), lo sfondo sarà migliore:
Esempio
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Prova tu stesso " | Nota: Per ripetere un'immagine set verticalmente background-repeat: repeat-y; |
|---|
Immagine di sfondo - Imposta la posizione e no-repeat
Mostrando l'immagine di sfondo solo una volta è specificato anche dal background-repeat proprietà:
Esempio
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Prova tu stesso " Nell'esempio precedente, l'immagine di sfondo è mostrato nella stessa posizione come testo. Vogliamo cambiare la posizione dell'immagine, in modo da non disturbare il testo troppo.
La posizione dell'immagine è specificato dal background-position proprietà:
Esempio
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Prova tu stesso " Immagine di sfondo - Posizione fissa
Per specificare che l'immagine di sfondo deve essere fissato (non scorrere con il resto della pagina), utilizzare il background-attachment proprietà:
Esempio
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Prova tu stesso " Background - proprietà abbreviata
Per accorciare il codice, è possibile specificare tutte le proprietà di background in un'unica struttura. Questo si chiama una proprietà scorciatoia.
La proprietà scorciatoia per sfondo è background :
Quando si utilizza la proprietà scorciatoia l'ordine dei valori delle proprietà è:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
Non importa se uno dei valori di proprietà manca, finché gli altri sono in questo ordine.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Tutte le proprietà CSS Sfondo
| Proprietà | Descrizione |
|---|---|
| background | Imposta tutte le proprietà di fondo in una dichiarazione |
| background-attachment | Imposta se un'immagine di sfondo è fissa o scorre con il resto della pagina |
| background-color | Imposta il colore di un elemento di sfondo |
| background-image | Imposta l'immagine di sfondo di un elemento |
| background-position | Imposta la posizione iniziale di un'immagine di sfondo |
| background-repeat | Imposta come verrà ripetuto un'immagine di sfondo |