background-repeat

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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 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.

Syntaxe

Formal syntax: <repeat-style>#
background-repeat: repeat-x     /* One-value syntax */
background-repeat: repeat-y
background-repeat: repeat
background-repeat: space
background-repeat: round
background-repeat: no-repeat

background-repeat: repeat space   /* Two-value syntax */
background-repeat: repeat repeat
background-repeat: round space
background-repeat: no-repeat round

background-repeat: inherit

Valeurs

<repeat-style>
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 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 background-position.

Exemples

Page d'exemple

Voir l'exemple sur une page

Example in a list

HTML Content

<ul>
    <li>Example 1: no-repeat
        <div class="one">&nbsp;</div>
    </li>
    <li>Example 2: repeat
        <div class="two">&nbsp;</div>
    </li>
    <li>Example 3: repeat-x
        <div class="three">&nbsp;</div>
    </li>
    <li>Example 4: repeat-y
        <div class="four">&nbsp;</div>
    </li>
    <li>Example 5: repeat-x, repeat-y (multiple images)
        <div class="five">&nbsp;</div>
    </li>
</ul>

CSS Content

/* Shared for all DIVS in example */
li {margin-bottom: 12px;}
div {
    background-image: url(https://developer.mozilla.org/samples/cssref/background-repeat/starsolid.gif);
    width: 144px;
    height: 84px;
}

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

/* Multiple images */
.five {
    background-image:  url(https://developer.mozilla.org/samples/cssref/background-repeat/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

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

Spécifications

Spécification Statut Commentaire
CSS Backgrounds and Borders Module Level 3 Candidat au statut de recommandation 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 Recommendation Pas de changements significatifs
CSS 1 (traduction française) Recommendation  


Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 1.0 (1.7 ou moins) 4.0 3.5 1.0 (85)
Fonds multiples 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
Différentes valeurs pour les directions X et Y  (syntaxe à deux valeurs) (Oui) 13.0 (13.0) bug 548375 9.0 (Oui) (Oui)
Mots-clés round et space 40 Pas de support bug 548372 9.0 10.5 Pas de support
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base ? ? ? ? ?
Fonds multiples ? ? ? ? ?
Différentes valeurs pour les directions X et Y  (syntaxe à deux valeurs) ? ? ? ? ?
Mots-clés round et space ? ? ? ? ?

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : technolabtips, louuis, teoli, FredB, tregagnon, Nathymig, Kyodev, Fredchat
Dernière mise à jour par : technolabtips,