mozilla
Vos résultats de recherche

    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 : 
    Contributors to this page: louuis, tregagnon, Fredchat, Nathymig, teoli, technolabtips, FredB, Kyodev
    Dernière mise à jour par : technolabtips,