background-repeat

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

/* Syntaxe avec une seule valeur */
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;

background-repeat: inherit;

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.
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>#
où 
<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

Compatibilité des navigateurs

[1] Implémentée avec le bug 548375.

[2] Cette fonctionnalité a été implémentée via bug 548372.

Voir aussi

• Utiliser plusieurs arrières-plans en CSS