CSS abbreviazione di sfondo

CSS background - abbreviazione di proprietà

Per abbreviare il codice, puoi specificare tutte le proprietà di sfondo in un singolo attributo. Questo viene chiamato abbreviazione di proprietà.

Invece di scrivere:

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

Puoi usare l'abbreviazione di proprietà background:

Esempio

Imposta le proprietà di sfondo in una singola dichiarazione utilizzando l'abbreviazione di proprietà:

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

Prova a te stesso

Quando si utilizza l'abbreviazione di proprietà, l'ordine dei valori è:

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

Se manca un valore di proprietà, non è un problema, impostare semplicemente gli altri valori in questo ordine. Nota che nell'esempio sopra, non abbiamo utilizzato la proprietà background-attachment perché non ha un valore.

Tutte le proprietà di sfondo CSS

Proprietà Descrizione
background Proprietà abbreviata per impostare tutte le proprietà di sfondo in una singola dichiarazione.
background-attachment Imposta se l'immagine di sfondo è fissa o scorre insieme al resto della pagina.
background-clip Determina l'area di disegno dello sfondo.
background-color Imposta il colore di sfondo dell'elemento.
background-image Imposta l'immagine di sfondo dell'elemento.
background-origin Determina dove posizionare l'immagine di sfondo.
background-position Impostare la posizione iniziale dell'immagine di sfondo.
background-repeat Impostare se e come l'immagine di sfondo viene ripetuta.
background-size Definire la dimensione dell'immagine di sfondo.