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

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

Valeurs

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 :

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

css#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 :

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

css#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 :

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

css#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 :

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

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

Результат:

Voir aussi