background-origin

  • Raccourci de la révision : CSS/background-origin
  • Titre de la révision : CSS : la propriété background-origin
  • ID de la révision : 354897
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS background-origin détermine la zone de positionnement de l'arrière-plan, soit la position de l'origine d'une image spécifiée en utilisant la propriété CSS {{ cssxref("background-image") }}.

Il faut noter que background-origin est ignorée si {{ Cssxref("background-attachment") }} est défini à fixed.

Si la valeur de la propriété n'est pas définie dans la propriété raccourcie {{ cssxref("background") }} qui s'applique à l'élément après la propriété CSS background-origin, la valeur de cette propriété est alors réinitialisée par la propriété raccourcie.
  • {{ Xref_cssinitial() }} padding-box
  • S'applique à tous les éléments
  • {{ Xref_cssinherited() }} non
  • Média {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} comme spécifiée

Syntaxe

background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*

Valeurs

border-box
L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (tout en restant en-dessous de la bordure sur l'axe z).
padding-box
Aucun arrière-plan n'est dessiné en-dessous de la bordure (l'arrière-plan s'étend jusqu'à la bordure extérieure du padding).
content-box
L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu.

Exemples

 .example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   /* L'arrière-plan sera dans le padding */       
   background-origin: content-box;
}
div {
  background-image: url('mainback.png'), url('logo.jpg');
  background-position: 0px 0px, top right;
  background-origin: padding-box, content-box;
}

Spécifications

Spécification État Commentaire
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 [3] {{ CompatGeckoDesktop("2.0") }} [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] {{ CompatGeckoDesktop("2.0") }} [1] 9.0 [2] {{ CompatNo() }} 3.0 (522) [3]
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
content-box {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[1] Gecko supporte, depuis la version 1.1 jusqu'à la version 1.9.2, ce qui correspond à Firefox 1.0 jusqu'à Firefox 3.6 inclus, la syntaxe préfixée : -moz-background-origin: padding | border.

[2] Internet Explorer jusqu'à la version 7 se comporte comme si la propriété suivante était définie : background-origin: border-box; Internet Explorer 8 se comporte comme si la propriété suivante était définie : background-origin: padding-box; ce qui est la valeur par défaut habituelle.

[3] Webkit support aussi une version préfixée de cette propriété, qui dans le cas présent accepte, en plus des mots-clés actuels, les synonymes suivants : padding, border, et content.

[4] Konqueror 3.5.4 supporte -khtml-background-origin.

Voir également

  • Propriétés CSS liées à l'arrière-plan : {{ CSS_Reference:Background() }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>background-origin</code> détermine la zone de positionnement de l'arrière-plan, soit la position de l'origine d'une image spécifiée en utilisant la propriété CSS {{ cssxref("background-image") }}.</p>
<p>Il faut noter que <code>background-origin</code> est ignorée si {{ Cssxref("background-attachment") }} est défini à <code><code>fixed</code></code>.</p>
<div class="note">
  Si la valeur de la propriété n'est pas définie dans la propriété raccourcie {{ cssxref("background") }} qui s'applique à l'élément après la propriété CSS <code>background-origin</code>, la valeur de cette propriété est alors réinitialisée par la propriété raccourcie.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} </dfn><code>padding-box</code></li>
  <li><dfn>S'applique à </dfn>tous les éléments</li>
  <li><dfn>{{ Xref_cssinherited() }} </dfn>non</li>
  <li><dfn>Média </dfn>{{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} </dfn>comme spécifiée</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
background-origin: [<code>padding-box | border-box | conten</code><code>t-box</code>][, [<code>border-box | padding-box | conten</code><code>t-box</code>]]*
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    border-box</dt>
  <dd>
    L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (tout en restant en-dessous de la bordure sur l'axe z).</dd>
  <dt>
    padding-box</dt>
  <dd>
    Aucun arrière-plan n'est dessiné en-dessous de la bordure (l'arrière-plan s'étend jusqu'à la bordure extérieure du <code>padding</code>).</dd>
  <dt>
    content-box</dt>
  <dd>
    L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre>
 .example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   /* L'arrière-plan sera dans le padding */&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;  background-origin: content-box;
}
</pre>
<pre>
div {
&nbsp; background-image:&nbsp;url('mainback.png'), url('logo.jpg');
&nbsp; background-position: 0px 0px, top right;
  background-origin: padding-box, content-box;
}
</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-origin" title="http://dev.w3.org/csswg/css3-background/#the-background-origin">CSS Backgrounds and Borders Module Level 3</a></td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>1.0 [3]</td>
        <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
        <td>9.0 [2]</td>
        <td>10.5</td>
        <td>3.0 (522) [3]</td>
      </tr>
      <tr>
        <td><code>content-box</code></td>
        <td>1.0 [3]</td>
        <td>{{ CompatGeckoDesktop("2.0") }} [1]</td>
        <td>9.0 [2]</td>
        <td>{{ CompatNo() }}</td>
        <td>3.0 (522) [3]</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>content-box</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Gecko supporte, depuis la version 1.1 jusqu'à la version 1.9.2, ce qui correspond à Firefox 1.0 jusqu'à Firefox 3.6 inclus, la syntaxe préfixée : <code>-moz-background-origin: padding | border</code>.</p>
<p>[2] Internet Explorer jusqu'à la version 7 se comporte comme si la propriété suivante était définie : <code>background-origin: border-box;</code> Internet Explorer 8 se comporte comme si la propriété suivante était définie : <code>background-origin: padding-box;</code> ce qui est la valeur par défaut habituelle.</p>
<p>[3] Webkit support aussi une version préfixée de cette propriété, qui dans le cas présent accepte, en plus des mots-clés actuels, les synonymes suivants : <code>padding</code>, <code>border</code>, et <code>content</code>.</p>
<p>[4] Konqueror 3.5.4 supporte<code> -khtml-background-origin</code>.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>Propriétés CSS liées à l'arrière-plan : {{ CSS_Reference:Background() }}</li>
</ul>
Revenir à cette révision