w3docs logo

Propriété CSS background-origin

La propriété CSS background-origin spécifie que la zone du positionnement de background-image.

Si background-attachment est "fixed", la propriété background-origin sera ignorée et n'aura aucun effet.

Valeur initiale padding-box
Appliquée à Tous les éléments. Elle est aussi appliquée à ::first-letter et ::first-line.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.backgroundOrigin = "content-box";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété background-origin</h2>
    <p>Ici background-origin est définie à "border-box".</p>
    <div class="example1">
      <h2>Bonjour, monde.</h2>
      <p> Quelque texte.</p>
    </div>
  </body>
</html>

Voici un exemple avec 3 valeurs ensemble.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété background-origin</h2>
    <p>Ici la background-origin est définie à "padding-box" qui est la valeur initiale de cette propriété.</p>
    <div class="example1">
      <h2>Bonjour, monde</h2>
      <p> Quelque texte.</p>
    </div>
    <p>Ici la background-origin est définie à "content-box".</p>
    <div class="example2">
      <h2>Bonjour, monde</h2>
      <p> Quelque texte.</p>
    </div>
    </div>
  </body>
</html>

Dans l'exemple si-dessous, vous pouvez voir comment définir deux images du fond pour un élément <div> avec des différentes valeurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété background-origin</h2>
    <p>C'est défini à background-origin: content-box, border-box:</p>
    <div id="example1">
      <h2>Bonjour Monde</h2>
      <p>La première image du fond commence du coin supérieur gauche de la bordure.</p>
      <p>La deuxième image du fond commence du coin supérieur gauche du contenu.</p>
    </div>
    <p>C'est défini background-origin: content-box, padding-box:</p>
    <div id="example2">
      <h2>Bonjour Monde</h2>
      <p>La première image du fond commence du coin supérieur gauche du bord de padding.</p>
      <p>La deuxième image du fond commence du coin supérieur gauche du contenu.</p>
    </div>
    <p>C'est défini background-origin: content-box, content-box:</p>
    <div id="example3">
      <h2>Bonjour Monde</h2>
      <p>Les images du fond les deux commencent du coin supérieur gauche du contenu.</p>
    </div>
  </body>
</html>

Valeurs

Valeur Description
border-box La propriété background-position est relative à la bordure et la background-image commence du coin supérieur gauche du bord de padding. C'est la valeur initiale.
padding-box La propriété background-position est relative à la boîte padding et la background-image commence du coin supérieur gauche de la bordure.
content-box La propriété background-position est relative à la boîte de contenu et la background-image commence du coin supérieur gauche du contenu.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
15.0+ 4.0+
3.6 -moz- 		7.0+ 11.5+
10.1 -o-

Pratiquez vos connaissances

Quelle est la fonction de la propriété 'background-origin' en CSS?
Trouvez-vous cela utile?