Le proprietà background in CSS sono usate per definire gli effetti di sfondo per gli elementi.

In questa parte, impareremo le seguenti proprietà background in CSS:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS background-color

Questa proprietà specifica il colore di sfondo di un elemento.

Esempio

Il colore di sfondo di una pagina è impostato così:

                    
body {
    background-color: lightblue;
}             
    

Con i CSS, un colore è più spesso specificato da:

• un nome valido di colore, come "red"
• un valore HEX, come "#ff0000"
• un valore RGB, come "rgb(255,0,0)"

Controlla i Valori dei colori in CSS per una lista completa di possibili valori di colori.

Altri elementi

Si può impostare il colore di sfondo di qualunque elemento HTML:

Esempio

Qui, gli elementi <h1>, <p>, e <div> avranno colori di sfondo differenti:

    
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
    

Opacità / Trasparenza

La proprietà opacity specifica l'opacità/trasparenza di un elemento.

Esempio

    
div {
  background-color: green;
  opacity: 0.3;
}
    

Trasparenza usando RGBA

Se non si vuole applicare l'opacità agl'elementi figlio, come nell'esempio in precedenza riportato, bisogna usare i valori di colore RGBA.

Abbiamo appreso che possiamo usare un valore di colore RGB. In aggiunta all'RGB, possiamo usare un valore di colore RGB con un canale alfa (RGBA), che specifica l'opacità per un colore.

Un valore di colore RGBA è specificato con: rgba(red, green, blue, alpha). Il parametro alpha è un numero tra 0.0 (totalmente trasparente) e 1.0 (totalmente opaco).

Esempio

    
div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
    

CSS background-image

Questa proprietà specifica una immagine da usare come sfondo di un elemento.

Di default, l'immagine è ripetuta, così copre l'intero elemento.

Esempio

Impostare l'immagine di sfondo per una pagina:

    
body {
  background-image: url('paper.gif');
}
    

L'immagine di sfondo può anche essere impostata per elementi specifici, come l'elemento <p>:

CSS background-repeat

Di default, questa proprietà ripete una immagine sia orizzontalmente che verticalmente.

Alcune immagini dovrebbero essere ripetute solo orizzontalmente o verticalmente, o potrebbero apparire strane.

Se un'immagine è ripetuta solo orizzontalmente (background-repeat: repeat-x;), lo sfondo apparirà migliore.

CSS background-repeat: no-repeat

Mostrando l'immagine sfondo solo una volta è anche specificato dalla proprietà background-repeat

Esempio

Mostra l'immagine di sfondo solo una volta:

    
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
    

Lo sfondo può disturbare il testo, possiamo cambiare la posizione dello sfondo.

CSS background-position

Questa proprietà è utilizzata per specificare la posizione dell'immagine di sfondo.

Esempio

Posiziona l'immagine di sfondo nell'angolo in alto a destra:

    
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
    

CSS background-attachment

Questa proprietà specifica se l'immagine di sfondo deve scorrere o rimanere fissa (non scorrendo col resto della pagina):

Esempio

Specifica che l'immagine di sfondo deve essere fissa:

    
body {
  background-image: url('img_tree.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
    

Esempio

Specifica che l'immagine di sfondo deve scorrere col resto della pagina:

    
body {
  background-image: url('img_tree.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
    

CSS background - Proprietà Shorthand

Per accorciare il codice, è anche possibile specificare tutte le proprietà dello sfondo in una singola proprietà. Questa è chiamata proprietà shorthand.

Invece di scrivere:

    
body {
  background-color: #ffffff;
  background-image: url('img_tree.png');
  background-repeat: no-repeat;
  background-position: right top;
}
    

Si può usare la proprietà shorthand background:

Esempio

Si usa la proprietà shorthand per impostare le proprietà dello sfondo in una dichiarazione:

    
body {
  background: #ffffff url('img_tree.png') no-repeat right top;
}
    

Quando si usa la proprietà shorthand l'ordine dei valori delle proprietà è:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Non importa se uno dei valori delle proprietà è mancante, fintanto che gli altri sono in questo ordine.

Tutte le proprietà degli sfondi in CSS