Proprietà CSS background

La proprietà CSS background è uno shorthand usato per impostare tutte le proprietà di stile dello sfondo. La proprietà background include le seguenti proprietà:

background-color, che si usa per impostare un colore di sfondo.
background-image, che si usa per impostare una o più immagini di sfondo per un elemento.
background-repeat, che si usa per controllare la ripetizione di un elemento.
background-position, che si usa per impostare la posizione di un'immagine di sfondo.
background-origin, che si usa per definire l'area di posizionamento dello sfondo, ovvero la posizione di un'immagine inserita tramite la proprietà background-image.
background-clip, che si usa per estendere l'immagine o il colore di sfondo fin sotto il bordo.
background-attachment, che si usa per definire se l'immagine di sfondo è fissa o se scorre insieme al resto della pagina.
background-size, che si usa per definire la dimensione dell'immagine di sfondo.

Se una delle proprietà nello shorthand background è background-size, si deve usare una barra (/) per separarla da background-position.

Quando si usano più sorgenti di background-image ma serve anche un background-color, questo deve essere indicato per ultimo nell'elenco.

Valore iniziale	Vedi le singole proprietà.
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditata	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

Sintassi della proprietà CSS background

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

Esempio della proprietà background:

Esempio della proprietà CSS background color

<!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

Esempio della proprietà background con un'immagine applicata:

Esempio della proprietà CSS background image

<!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 »

Vedi un altro esempio con la proprietà background, in cui vengono applicati i valori di background-color, background-image, background-repeat e background-attachment.

Esempio della proprietà background con diversi valori:

Esempio della proprietà CSS background

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("/build/images/w3docs-logo-black.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 »

Nell'esempio seguente, la proprietà background-size si usa per specificare la dimensione dello sfondo.

Esempio della proprietà background-size:

Esempio della proprietà CSS background-size

<!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 »

Qui, la proprietà background-clip specifica fin dove deve estendersi lo sfondo all'interno di un elemento.

Esempio della proprietà background-clip:

Esempio della proprietà CSS background-clip

<!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 »

Nell'esempio successivo viene usata la proprietà background-origin. Fa partire l'immagine di sfondo dall'angolo in alto a sinistra del contenuto.

Esempio della proprietà background-origin:

Esempio della proprietà CSS background-origin

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("/build/images/w3docs-logo-black.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 la dimensione 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.

Pratica

What are the properties of CSS background?