Propriété background-origin

La propriété background-origin définit comment l'image de fond (spécifiquement l'image, pas le remplissage) sera positionnée par rapport à l'élément : une partie de l'image de fond empiétera sous la bordure, le fond n'empiétera pas sous la bordure ou le fond sera positionné uniquement au-dessus du contenu de l'élément (c'est-à-dire que padding repoussera le fond).

Syntaxe

sélecteur {
	background-origin: padding-box | border-box | content-box;
}

Valeurs

Valeur	Description
`border-box`	L'image de fond empiétera sous la bordure.
`padding-box`	L'image de fond n'empiétera pas sous la bordure.
`content-box`	L'image de fond sera uniquement au-dessus du contenu.

Valeur par défaut : padding-box.

Remarques

La propriété background-origin ne fonctionne pas lorsque background-attachment a la valeur fixed. De plus, avec background-repeat à la valeur repeat, la propriété background-origin fonctionne toujours comme avec la valeur border-box.

Exemple . Par défaut

Par défaut, le fond n'empiétera pas sous la bordure :

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

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

Exemple . Valeur border-box

Maintenant, le fond empiétera sous la bordure :

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

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

Exemple . Valeur content-box

Et maintenant, le fond sera repoussé par le 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;
}

Exemple . Avec background-repeat: repeat

Avec background-repeat à la valeur repeat, la propriété background-origin fonctionne toujours comme avec la valeur border-box, c'est-à-dire que le fond empiète toujours sous la bordure :

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

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

Voir aussi

la propriété background-clip,
qui définit la position à la fois de l'image de fond et du remplissage
la propriété background,
qui est une propriété raccourcie pour le fond