Proprietà CSS background

La proprietà CSS background è una shorthand che consente di impostare tutti gli stili di sfondo di un elemento in una singola dichiarazione, invece di scrivere ogni proprietà su una riga separata. Internamente si espande nelle seguenti proprietà longhand:

background-color — imposta un colore di sfondo uniforme.
background-image — imposta una o più immagini di sfondo per un elemento.
background-repeat — controlla se e come l'immagine di sfondo si ripete.
background-position — imposta la posizione iniziale dell'immagine di sfondo.
background-origin — definisce l'area rispetto alla quale l'immagine viene posizionata (border-box, padding-box o content-box).
background-clip — definisce fino a dove si estende lo sfondo (colore e immagine) all'interno dell'elemento.
background-attachment — definisce se lo sfondo scorre con la pagina o rimane fisso.
background-size — definisce le dimensioni dell'immagine di sfondo.

Perché usare la shorthand

Scrivere una sola riga background è più breve e leggibile rispetto a cinque o sei proprietà separate, e rende l'intenzione immediatamente chiara. C'è un effetto collaterale importante da tenere presente: la shorthand reimposta al valore iniziale tutte le proprietà longhand di background non menzionate. Ad esempio, background: red; reimposta anche eventuali background-image, background-position e così via impostati in precedenza. Per questo motivo, dichiara prima la shorthand e aggiungi eventuali sovrascritture (come un background-size separato) successivamente.

Ordine e regole speciali

I valori all'interno di background possono apparire quasi in qualsiasi ordine, ma due regole sono importanti:

background-size deve seguire background-position, separato da uno slash (/). Ad esempio: background: url(bg.png) center / cover; — center è la posizione e cover è la dimensione.
Quando si sovrappongono più immagini di sfondo, background-color deve essere nell'ultimo layer, perché il colore viene dipinto dietro tutte le immagini.

Valore iniziale	Vedi le singole proprietà.
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No.
Animabile	Sì. Background-color, background-position e background-size sono animabili.
Versione	CSS1+ nuove proprietà in CSS3
Sintassi DOM	object.style.background = "blue url(img.jpeg) bottom left repeat";

Sintassi

background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

Esempi

Un semplice colore di sfondo

L'utilizzo più elementare della shorthand è impostare solo il colore di sfondo. Qualsiasi valore accettato dalla shorthand può essere omesso; gli altri tornano ai valori iniziali.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the background color is set to green.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

![Proprietà CSS background](/uploads/media/default/0001/03/5774b8353b8a0b810579a25a3cdcc2580213b1ff.png "CSS background property result" =420x)

Usare un'immagine di sfondo

È possibile passare un url() alla shorthand per inserire un'immagine come sfondo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here a background image is used.</p>
  </body>
</html>

Provalo tu stesso »

Combinare più valori

Questo esempio imposta il colore, l'immagine, il comportamento di ripetizione, l'attachment e la posizione in un'unica dichiarazione. L'immagine è centrata, non ripetuta e fissa mentre la pagina scorre.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>In this example background property specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center.</p>
  </body>
</html>

Provalo tu stesso »

Impostare le dimensioni dello sfondo

Poiché background-size non può essere combinato con il resto della shorthand senza uno slash, spesso è più pulito impostarlo su una riga separata dopo la shorthand. Qui cover scala l'immagine per riempire l'intero elemento.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the size for the background is set to cover.</p>
  </body>
</html>

Provalo tu stesso »

Ritagliare lo sfondo

La proprietà background-clip controlla fino a dove lo sfondo viene disegnato all'interno dell'elemento. Con padding-box, lo sfondo si ferma al bordo interno del bordo, quindi non si vede attraverso un bordo punteggiato o tratteggiato.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 8px dotted #ccc;
        padding: 25px;
        background: #ccc;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <div>
      <p>The background-clip for this div element is set to padding-box.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Posizionare l'origine dello sfondo

La proprietà background-origin imposta l'area rispetto alla quale l'immagine viene posizionata. Con padding-box (il valore predefinito), l'immagine parte dal bordo interno del bordo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here background-origin: padding-box (default) is set.</p>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
background-color	Imposta il colore di sfondo.
background-image	Imposta una o più immagini.
background-position	Specifica la posizione delle immagini di sfondo.
background-size	Imposta le dimensioni dell'immagine di sfondo.
background-repeat	Specifica come ripetere le immagini di sfondo.
background-origin	Specifica l'area di posizionamento delle immagini di sfondo.
background-clip	Specifica l'area di disegno delle immagini di sfondo.
background-attachment	Specifica se l'immagine è fissa o meno.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Eredita questa proprietà dall'elemento genitore.

Proprietà correlate

Per un controllo più fine, utilizza le singole proprietà longhand:

Esercizio

Pratica

Quali sono le proprietà di CSS background?