background-repeat

  • Raccourci de la révision : CSS/background-repeat
  • Titre de la révision : background-repeat
  • ID de la révision : 448325
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS background-repeat spécifie comment l'image d'arrière-plan doit être répétée. Une image d'arrière-plan peut être répétée sur l'axe horizontal, l'axe vertical, les deux, ou pas du tout. Quand le motif de l'image répétée ne permet pas de couvrir entièrement le fond, les ajustements peuvent être contrôlés par l'auteur : par défaut la dernière image est coupée, mais les différentes images de la mosaïque peuvent être redimensionnées, ou un espace peut être inséré entre chaque répétition.

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

Syntaxe

background-repeat: style-repetition[, style-repetition]*

où :

style-repetition
respecte soit la syntaxe avec une valeur — et dans ce cas les valeurs sont des raccourcis pour les équivalent à deux valeurs :
repeat-x est l'équivalent de repeat no-repeat
repeat-y est l'équivalent de no-repeat repeat
repeat est l'équivalent de repeat repeat
space est l'équivalent de space space
round est l'équivalent de round round
no-repeat est l'équivalent de no-repeat no-repeat
Ou la syntaxe a deux valeurs : la première valeur corresponds au comportement pour l'axe horizontal, et la deuxième valeur à celui pour l'axe vertical

repeat L'image est répétée dans la direction renseignée autant que nécessaire pour remplir la totalité de la surface de dessin de l'image d'arrière-plan. La dernière image peut être coupée si elle ne tient pas entièrement dans l'espace restant.
space L'image est répétée dans la direction renseignée autant que nécessaire pour remplir la plus grande partie de la surface dessin de l'image d'arrière-plan, sans avoir à couper la dernière image. L'espace restant non recouvert est distribué entre chaque image de la mosaïque. La première et la dernière image touchent les bords de l'élément. La valeur de la propriété CSS {{ cssxref("background-position") }} est ignorée pour la direction concernée, sauf si une seule image est plus grande que la surface de dessin de l'image d'arrière-plan ; c'est le seul cas où une image peut se retrouver coupée quand la valeur space est utilisée.
round L'image est répétée dans la direction renseignée autant que nécessaire pour remplir la plus grande partie de la surface de dessin de l'image d'arrière-plan, sans avoir à couper la dernière image. Si cela ne recouvre pas exactement la surface, les images de la mosaïque sont redimensionnées dans la direction de la répétition afin de correspondre.
no-repeat L'image n'est pas répétée (et de par ce fait, la surface de dessin de l'image d'arrière-plan ne sera pas forcément recouverte). La position de l'image d'arrière-plan non répétée est définie par la propriété CSS {{ cssxref("background-position") }}.

Exemples

{{ CSSLiveSample("background-repeat") }}

.exampleone {
	background-image: url("logo.png");
	background-repeat: repeat-x;
}
.exampletwo {
	background-image: url("logo.png");
	background-repeat: no-repeat;
}
.examplethree {
  background-image: url("img1.png"), url("img2.png");
  background-repeat: repeat-x, repeat-y;
} 

Chaque image est associée avec le style de répétition correspondant, successivement, de la première à la dernière.

Spécifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }} Ajout du support pour les fonds multiples, la syntaxe a deux valeurs permettant un comportement distinct pour la répétition du fond dans le sens horizontal ou vertical, les mots-clés space et round, et pour les arrières-plans sur les éléments en-ligne en définissant précisément la surface de dessin de l'arrière-plan.
CSS 2.1 {{ Spec2('CSS2.1') }} Pas de changements significatifs
CSS 1 (traduction française) {{ Spec2('CSS1') }}  

 

<h2 id="Compatibilit.C3.A9_des_navigateurs" "="">Compatibilité des navigateurs

 

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 {{ CompatGeckoDesktop("1.0") }} 4.0 3.5 1.0 (85)
Fonds multiples 1.0 {{ CompatGeckoDesktop("1.9.2") }} 9.0 10.5 1.3 (312)
Différentes valeurs pour les directions X et Y  (syntaxe à deux valeurs) {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("13.0") }} {{ bug("548375") }} 9.0 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Mots-clés round et space {{ CompatNo() }} {{ CompatNo() }} {{ bug("548372") }} 9.0 10.5 {{ CompatNo() }}
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Fonds multiples {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Différentes valeurs pour les directions X et Y  (syntaxe à deux valeurs) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Mots-clés round et space {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

Propriétés CSS pour les arrières-plans : {{ 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-repeat</code> spécifie comment l'image d'arrière-plan doit être répétée. Une image d'arrière-plan peut être répétée sur l'axe horizontal, l'axe vertical, les deux, ou pas du tout. Quand le motif de l'image répétée ne permet pas de couvrir entièrement le fond, les ajustements peuvent être contrôlés par l'auteur : par défaut la dernière image est coupée, mais les différentes images de la mosaïque peuvent être redimensionnées, ou un espace peut être inséré entre chaque répétition.</p>
<div class="note">
  <strong>Note :</strong> Si la valeur de cette propriété n'est pas définie dans une propriété raccourcie {{ cssxref("background") }} appliqué à l'élément après la propriété <code>background-repeat</code>, la valeur de cette propriété se retrouve réinitialisée par la propriété raccourcie.</div>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}} </dfn><code>repeat</code></li>
  <li><dfn>S'applique à&nbsp;</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="eval">
background-repeat: <em>style-repetition</em>[, <em>style-repetition</em>]*
</pre>
<p>où :</p>
<dl>
  <dt>
    <em>style-repetition</em></dt>
  <dd>
    respecte soit la syntaxe avec une valeur — et dans ce cas les valeurs sont des raccourcis pour les équivalent à deux valeurs :<br />
    <table class="standard-table">
      <tbody>
        <tr>
          <td><code>repeat-x</code></td>
          <td>est l'équivalent de <code>repeat no-repeat</code></td>
        </tr>
        <tr>
          <td><code>repeat-y</code></td>
          <td>est l'équivalent de <code>no-repeat repeat</code></td>
        </tr>
        <tr>
          <td><code>repeat</code></td>
          <td>est l'équivalent de <code>repeat repeat</code></td>
        </tr>
        <tr>
          <td><code>space</code></td>
          <td>est l'équivalent de <code>space space</code></td>
        </tr>
        <tr>
          <td><code>round</code></td>
          <td>est l'équivalent de <code>round round</code></td>
        </tr>
        <tr>
          <td><code>no-repeat</code></td>
          <td>est l'équivalent de <code>no-repeat no-repeat</code></td>
        </tr>
      </tbody>
    </table>
    Ou la syntaxe a deux valeurs : la première valeur corresponds au comportement pour l'axe horizontal, et la deuxième valeur à celui pour l'axe vertical<br />
    <br />
    <table class="standard-table">
      <tbody>
        <tr>
          <td><code>repeat</code></td>
          <td>L'image est répétée dans la direction renseignée autant que nécessaire pour remplir la totalité de la surface de dessin de l'image d'arrière-plan. La dernière image peut être coupée si elle ne tient pas entièrement dans l'espace restant.</td>
        </tr>
        <tr>
          <td><code>space</code></td>
          <td>L'image est répétée dans la direction renseignée autant que nécessaire pour remplir la plus grande partie de la surface dessin de l'image d'arrière-plan, sans avoir à couper la dernière image. L'espace restant non recouvert est distribué entre chaque image de la mosaïque. La première et la dernière image touchent les bords de l'élément. La valeur de la propriété CSS {{ cssxref("background-position") }} est ignorée pour la direction concernée, sauf si une seule image est plus grande que la surface de dessin de l'image d'arrière-plan ; c'est le seul cas où une image peut se retrouver coupée quand la valeur <code>space</code> est utilisée.</td>
        </tr>
        <tr>
          <td><code>round</code></td>
          <td>L'image est répétée dans la direction renseignée autant que nécessaire pour remplir la plus grande partie de la surface de dessin de l'image d'arrière-plan, sans avoir à couper la dernière image. Si cela ne recouvre pas exactement la surface, les images de la mosaïque sont redimensionnées dans la direction de la répétition afin de correspondre.</td>
        </tr>
        <tr>
          <td><code>no-repeat</code></td>
          <td>L'image n'est pas répétée (et de par ce fait, la surface de dessin de l'image d'arrière-plan ne sera pas forcément recouverte). La position de l'image d'arrière-plan non répétée est définie par la propriété CSS {{ cssxref("background-position") }}.</td>
        </tr>
      </tbody>
    </table>
  </dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>{{ CSSLiveSample("background-repeat") }}</p>
<pre class="eval">
.exampleone {
	background-image: url("logo.png");
	background-repeat: repeat-x;
}
</pre>
<pre class="eval">
.exampletwo {
	background-image: url("logo.png");
	background-repeat: no-repeat;
}
</pre>
<pre>
.examplethree {
&nbsp; background-image: url("img1.png"), url("img2.png");
&nbsp; background-repeat:&nbsp;repeat-x, repeat-y;
} 
</pre>
<p>Chaque image est associée avec le style de répétition correspondant, successivement, de la première à la dernière.</p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/css3-background/#the-background-repeat" title="http://www.w3.org/TR/css3-background/#the-background-repeat">CSS Backgrounds and Borders Module Level 3</a></td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>Ajout du support pour les fonds multiples, la syntaxe a deux valeurs permettant un comportement distinct pour la répétition du fond dans le sens horizontal ou vertical, les mots-clés <code>space</code> et <code>round</code>, et pour les arrières-plans sur les éléments en-ligne en définissant précisément la surface de dessin de l'arrière-plan.</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat">CSS 2.1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Pas de changements significatifs</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS1#background-repeat">CSS 1</a> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css1/#background-repeat" title="http://www.yoyodesign.org/doc/w3c/css1/#background-repeat">(traduction française)</a></td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<p>&lt;h2 id="Compatibilit.C3.A9_des_navigateurs" "=""&gt;Compatibilité des navigateurs</p>
<p>&nbsp;</p>
<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</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>4.0</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>Fonds multiples</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>1.3 (312)</td>
      </tr>
      <tr>
        <td>Différentes valeurs pour les directions X et Y&nbsp; (syntaxe à deux valeurs)</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("13.0") }} {{ bug("548375") }}</td>
        <td>9.0</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>Mots-clés <code>round</code> et <code>space</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }} {{ bug("548372") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>{{ CompatNo() }}</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>Fonds multiples</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Différentes valeurs pour les directions X et Y&nbsp; (syntaxe à deux valeurs)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Mots-clés <code>round</code> et <code>space</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>Propriétés CSS pour les arrières-plans : {{ CSS_Reference:Background() }}</p>
Revenir à cette révision