Propriété CSS background-origin

La propriété CSS background-origin définit la zone de positionnement de l'arrière-plan — la boîte à partir de laquelle une background-image est positionnée et commence à être dessinée.

Chaque élément est construit à partir de trois boîtes imbriquées : la content box (où vivent le texte et les éléments enfants), la padding box (content box plus padding), et la border box (padding box plus la bordure). La valeur de background-origin détermine laquelle de ces boîtes sert de point d'origine (le coin supérieur gauche) pour l'image, et par rapport à quelle zone est mesuré le background-position.

Par défaut, une image d'arrière-plan est positionnée par rapport à la padding box, elle se place donc derrière le padding mais reste sous la bordure. Passer à content-box tire l'image à l'intérieur du padding ; passer à border-box lui permet de s'étendre sous la bordure. Utilisez cette propriété lorsque vous souhaitez aligner précisément une image d'arrière-plan avec le contenu, ou la glisser délibérément sous (ou hors de) la bordure.

Ne pas confondre avec background-clip. background-origin décide d'où l'image commence ; background-clip décide où l'arrière-plan peint est coupé (rogné). Ils acceptent les mêmes mots-clés mais répondent à des questions différentes, et sont souvent utilisés ensemble.

La propriété background-origin n'a aucun effet sur un arrière-plan fixed : si background-attachment est fixed, l'image est positionnée par rapport au viewport et background-origin est ignoré. C'est l'une des propriétés CSS3.

Valeur initiale	padding-box
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.backgroundOrigin = "content-box";

Syntaxe

Syntaxe de la propriété CSS background-origin

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

Exemple de la propriété background-origin :

Exemple de la propriété CSS background-origin avec la valeur 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>

Essayez vous-même »

Résultat

Voici un exemple montrant la différence entre padding-box et content-box.

Exemple de la propriété background-origin avec les valeurs « padding-box » et « content-box » :

Exemple de la propriété CSS background-origin avec les valeurs padding-box et 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>

Essayez vous-même »

Dans l'exemple ci-dessous, voyez comment définir deux images d'arrière-plan pour un élément div avec des valeurs différentes.

Exemple de la propriété background-origin avec des valeurs différentes :

Exemple de la propriété CSS background-origin avec les valeurs content-box et 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>

Essayez vous-même »

Arrière-plans multiples

Lorsqu'un élément possède plusieurs images d'arrière-plan séparées par des virgules, vous pouvez attribuer une origine différente à chacune — les valeurs correspondent aux images dans l'ordre. Dans l'exemple ci-dessus, background-origin: content-box, border-box; applique content-box à la première image et border-box à la seconde. Si vous fournissez moins de valeurs que d'images, CSS répète la liste pour remplir les images restantes.

Conseils et pièges à éviter

Aucun effet sans image d'arrière-plan. background-origin modifie uniquement l'endroit où une image commence ; il n'a aucun effet sur une couleur d'arrière-plan unie. Pour contrôler où une couleur est peinte, utilisez plutôt background-clip.
Il faut de l'espace pour que l'effet soit visible. Avec un padding nul et sans bordure, la content box, la padding box et la border box coïncident, de sorte que les trois valeurs semblent identiques. L'effet n'est visible que lorsque l'élément a un padding et/ou une bordure.
fixed l'annule. Comme indiqué ci-dessus, background-attachment: fixed positionne l'image par rapport au viewport, ce qui désactive background-origin.
À combiner avec background-clip. Un schéma courant est background-origin: border-box; background-clip: padding-box; — l'image est disposée depuis la bordure mais rognée au bord du padding.

Compatibilité des navigateurs

background-origin est pris en charge dans tous les navigateurs modernes — Chrome, Firefox, Safari, Edge et Opera. Aucun préfixe vendeur n'est requis pour les versions actuelles.

Valeurs

Valeur	Description	Essayez
border-box	Le background-position est relatif à la border box et l'image d'arrière-plan commence depuis le coin supérieur gauche de la bordure.	Essayez »
padding-box	Le background-position est relatif à la padding box et l'image d'arrière-plan commence depuis le coin supérieur gauche du bord de padding. C'est la valeur par défaut.	Essayez »
content-box	Le background-position est relatif à la content box et l'image d'arrière-plan commence depuis le coin supérieur gauche du contenu.	Essayez »
initial	Définit la propriété à sa valeur par défaut.	Essayez »
inherit	Hérite la propriété de son élément parent.

Pratique

Que contrôle la propriété CSS background-origin ?

La position initiale d'une image d'arrière-plan spécifiée par la propriété background.L'emplacement de l'image ou de la couleur d'arrière-plan par rapport à la border box, à la padding box ou à la content box de l'élément.La résolution de l'image d'arrière-plan.La vitesse des effets de transition pour une image d'arrière-plan.Elle fonctionne en synergie avec d'autres propriétés telles que background-clip ou background-size.