Proprietà CSS background-origin

La proprietà CSS background-origin specifica l'area di posizionamento dello sfondo — il riquadro da cui una background-image viene posizionata e inizia a essere disegnata.

Ogni elemento è composto da tre riquadri annidati: il content box (dove vivono testo ed elementi figlio), il padding box (content più padding) e il border box (padding box più il bordo). Il valore di background-origin stabilisce quale di questi riquadri funge da punto di origine (l'angolo in alto a sinistra) per l'immagine, e rispetto a quale area viene misurata la background-position.

Per impostazione predefinita, un'immagine di sfondo è posizionata rispetto al padding box, quindi si trova dietro il padding ma rimane sotto il bordo. Passare a content-box sposta l'immagine all'interno del padding; passare a border-box consente all'immagine di estendersi sotto il bordo. Utilizzala quando vuoi che un'immagine di sfondo si allinei precisamente con il contenuto, o per posizionarla deliberatamente sotto (o fuori) dal bordo.

Non confonderla con background-clip. background-origin stabilisce dove l'immagine inizia; background-clip stabilisce dove lo sfondo dipinto viene ritagliato. Accettano le stesse parole chiave ma rispondono a domande diverse, e vengono spesso usate insieme.

La proprietà background-origin non ha effetto su uno sfondo fixed: se background-attachment è fixed, l'immagine è posizionata rispetto al viewport e background-origin viene ignorata. È una delle proprietà CSS3.

Valore iniziale	padding-box
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.backgroundOrigin = "content-box";

Sintassi

Sintassi della proprietà CSS background-origin

background-origin: padding-box | border-box | content-box | initial | inherit;

Esempio della proprietà background-origin:

Esempio della proprietà CSS background-origin con il valore padding-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box".</p>
    <div class="example1">
      <h2>Hello world.</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Ecco un esempio che mostra la differenza tra padding-box e content-box.

Esempio della proprietà background-origin con i valori "padding-box" e "content-box":

Esempio della proprietà CSS background-origin con i valori padding-box e content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
      .example2 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
    <div class="example1">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
    <p>Here the background-origin is set to "content-box".</p>
    <div class="example2">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Nell'esempio seguente, scopri come impostare due immagini di sfondo per un elemento div con valori diversi.

Esempio della proprietà background-origin con valori diversi:

Esempio della proprietà CSS background-origin con i valori content-box e border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, border-box;
      }
      #example2 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, padding-box;
      }
      #example3 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin: content-box, border-box; is set:</p>
    <div id="example1">
      <h2>Hello World</h2>
      <p>The first background-image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the border.</p>
    </div>
    <p>Here the background-origin: content-box, padding-box:</p>
    <div id="example2">
      <h2>Hello World</h2>
      <p>The first background image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the padding edge.</p>
    </div>
    <p>Here the background-origin: content-box, content-box; is set:</p>
    <div id="example3">
      <h2>Hello World</h2>
      <p>Both background images start from the upper left corner of the content.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Sfondi multipli

Quando un elemento ha più immagini di sfondo separate da virgola, è possibile assegnare un'origine diversa a ciascuna — i valori vengono mappati alle immagini nell'ordine. Nell'esempio precedente, background-origin: content-box, border-box; applica content-box alla prima immagine e border-box alla seconda. Se si forniscono meno valori rispetto alle immagini, CSS ripete la lista per coprire le immagini rimanenti.

Suggerimenti e avvertenze

Nessun effetto senza un'immagine di sfondo. background-origin cambia solo dove un'immagine inizia; non ha alcun effetto su un colore di sfondo uniforme. Per controllare dove viene dipinto un colore, usa invece background-clip.
Deve esserci spazio per essere visibile. Con padding pari a zero e nessun bordo, il content box, il padding box e il border box coincidono, quindi tutti e tre i valori sembrano identici. L'effetto si vede solo quando l'elemento ha padding e/o un bordo.
fixed la sovrascrive. Come indicato sopra, background-attachment: fixed posiziona l'immagine rispetto al viewport, disabilitando background-origin.
Abbinala a background-clip. Un pattern comune è background-origin: border-box; background-clip: padding-box; — l'immagine viene disposta dal bordo ma ritagliata al margine del padding.

Supporto dei browser

background-origin è supportata in tutti i browser moderni — Chrome, Firefox, Safari, Edge e Opera. Non è richiesto alcun prefisso vendor per le versioni attuali.

Valori

Valore	Descrizione	Provalo
border-box	La background-position è relativa al border box e l'immagine di sfondo inizia dall'angolo in alto a sinistra del bordo.	Provalo »
padding-box	La background-position è relativa al padding box e l'immagine di sfondo inizia dall'angolo in alto a sinistra del margine del padding. Questo è il valore predefinito.	Provalo »
content-box	La background-position è relativa al content box e l'immagine di sfondo inizia dall'angolo in alto a sinistra del contenuto.	Provalo »
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dall'elemento genitore.

Pratica

Cosa controlla la proprietà CSS background-origin?

La posizione iniziale di un'immagine di sfondo specificata dalla proprietà background.La posizione dell'immagine o del colore di sfondo in relazione al border box, al padding box o al content box dell'elemento.La risoluzione dell'immagine di sfondo.La velocità degli effetti di transizione per un'immagine di sfondo.Funziona in sinergia con altre proprietà come background-clip o background-size.