background-repeat

  • Raccourci de la révision : CSS/background-repeat
  • Titre de la révision : CSS : la propriété background-repeat
  • ID de la révision : 49397
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire 8 words added

Contenu de la révision

{{ CSSRef() }}

Résumé

background-repeat spécifie si l'image est répétée (mosaïque), et de quelle manière.

Syntaxe

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

Valeurs

repeat 
L'image est répétée horizontalement et verticalement.
repeat-x 
L'image est répétée horizontalement seulement.
repeat-y 
L'image est répétée verticalement seulement.
no-repeat 
L'image n'est pas répété. Une seule copie de l'image est affichée.

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 zone de dessin de l'arrière-plan.
CSS 2.1 {{ Spec2('CSS2.1') }} Pas de changements significatifs
CSS 1 (traduction française) {{ Spec2('CSS1') }}  

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() }}

Interwiki Language Links

{{ languages( { "en": "en/CSS/background-repeat", "pl": "pl/CSS/background-repeat", "es": "es/CSS/background-repeat" } ) }}

Source de la révision

<p> {{ CSSRef() }}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p><code>background-repeat</code> spécifie si l'image est répétée (mosaïque), et de quelle manière.
</p>
<ul><li> <a href="fr/CSS/Valeur_initiale">Valeur initiale</a> : repeat
</li><li> S'applique à : tous les éléments
</li><li> <a href="fr/CSS/H%c3%a9ritage">Héritée</a> : non
</li><li> Pourcentages : N/A
</li><li> Média : <a href="fr/CSS/M%c3%a9dia/Visuel">visuel</a>
</li><li> <a href="fr/CSS/Valeur_calcul%c3%a9e">Valeur calculée</a> : comme spécifiée
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<dl><dt> repeat </dt><dd> L'image est répétée horizontalement et verticalement.
</dd><dt> repeat-x </dt><dd> L'image est répétée horizontalement seulement.
</dd><dt> repeat-y </dt><dd> L'image est répétée verticalement seulement.
</dd><dt> no-repeat </dt><dd> L'image n'est pas répété. Une seule copie de l'image est affichée.
</dd></dl>
<h3 name="Exemples">Exemples</h3>
<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 {
  background-image: url("img1.png"), url("img2.png");
  background-repeat: 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><h3 name="Sp.C3.A9cifications">Spécifications</h3>
<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 zone 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> </td> </tr> </tbody>
</table>
<h3 name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h3>
<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  (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 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  (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>
<h3 name="Voir_.C3.A9galement">Voir également</h3>
<p>Propriétés CSS pour les arrières-plans : {{ CSS_Reference:Background() }}</p>
<p><span class="comment">Interwiki Language Links</span></p>
<p>{{ languages( { "en": "en/CSS/background-repeat", "pl": "pl/CSS/background-repeat", "es": "es/CSS/background-repeat" } ) }}</p>
Revenir à cette révision