Proprietà background-origin

La proprietà background-origin specifica come l'immagine di sfondo (proprio l'immagine, non il colore di riempimento) sarà posizionata relativamente all'elemento: parte dell'immagine di sfondo si estenderà sotto il bordo, lo sfondo non si estenderà sotto il bordo o lo sfondo sarà posizionato solo sopra il contenuto dell'elemento (cioè il padding sposterà lo sfondo).

Sintassi

selettore {
	background-origin: padding-box | border-box | content-box;
}

Valori

Valore	Descrizione
`border-box`	L'immagine di sfondo si estenderà sotto il bordo.
`padding-box`	L'immagine di sfondo non si estenderà sotto il bordo.
`content-box`	L'immagine di sfondo sarà solo sopra il contenuto.

Valore predefinito: padding-box.

Note

La proprietà background-origin non funziona, quando background-attachment ha il valore fixed. Inoltre, con background-repeat impostato su repeat, la proprietà background-origin funziona sempre come con il valore border-box.

Esempio . Predefinito

Per impostazione predefinita, lo sfondo non si estenderà sotto il bordo:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Esempio . Valore border-box

Ora lo sfondo si estenderà sotto il bordo:

<div id="elem"></div>

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Esempio . Valore content-box

E ora lo sfondo sarà spostato dal padding:

<div id="elem"></div>

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Esempio . Con background-repeat: repeat

Con background-repeat impostato su repeat, la proprietà background-origin funziona sempre come con il valore border-box, cioè lo sfondo si estende sempre sotto il bordo:

<div id="elem"></div>

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

Vedi anche

la proprietà background-clip,
che specifica la posizione sia dell'immagine di sfondo che del colore di riempimento
la proprietà background,
che è una proprietà abbreviata per lo sfondo