La propriété background-repeat définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.

Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (round) voire être distribuées avec des espaces entre les motifs pour remplir la zone (space).

Syntaxe

/* Valeurs avec un mot-clé */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Syntaxe avec deux valeurs        */
/* Première valeur : axe horizontal */
/* Seconde valeur : axe vertical    */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* Valeurs globales */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

Valeurs

<repeat-style>
Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance :
Une seule valeur Équivalent avec deux-valeurs
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat
Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options :
repeat L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.
space L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété background-position est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où space est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.
round L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels.
no-repeat Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété background-position.

Syntaxe formelle

<repeat-style>#


<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

Exemples

CSS

/* Commun à tous les DIVS */
ol, li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 160px;
    height: 70px;
}

/* background repeat CSS */
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

.five {
   background-repeat: space;
}

.six {
   background-repeat: round;
}

/* Plusieurs images */
.seven {
    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

HTML

<ol>
    <li>no-repeat
        <div class="one"></div>
    </li>
    <li>repeat
        <div class="two"></div>
    </li>
    <li>repeat-x
        <div class="three"></div>
    </li>
    <li>repeat-y
        <div class="four"></div>
    </li>
    <li>space
        <div class="five"></div>
    </li>
    <li>round
        <div class="six"></div>
    </li>
    <li>repeat-x, repeat-y (plusieurs images)
        <div class="seven"></div>
    </li>
</ol>

Résultat

Dans cet exemple, chaque élément de la liste illustre une valeur différente de background-repeat.

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background-repeat' dans cette spécification.
Candidat au statut de recommandation Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés space et round sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne.
CSS Level 2 (Revision 1)
La définition de 'background-repeat' dans cette spécification.
Recommendation Aucune modification significative.
CSS Level 1
La définition de 'background-repeat' dans cette spécification.
Recommendation Définition initiale.

Valeur initialerepeat
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéeune liste dont chaque élément consiste en deux mots-clé, un par dimension
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
Multiple backgroundsChrome Support complet 1Edge Support complet 12Firefox Support complet 3.6IE Support complet 9Opera Support complet 10.5Safari Support complet 1.3WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
Two-value syntax (different values for x & y directions)Chrome Support complet OuiEdge Support complet 12Firefox Support complet 13IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 14Opera Android ? Safari iOS ? Samsung Internet Android ?
round and space keywordsChrome Support complet OuiEdge Support complet 12Firefox Support complet 49IE Support complet 9Opera Support complet 10.5Safari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 49Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,