mozilla
Vos résultats de recherche

    background-position

    Résumé

    La propriété CSS background-position indique la position initiale d'une image d'arrière-plan, par rapport à la zone de positionnement défini par background-origin, pour chaque image renseignée.

    Si la valeur pour cette propriété n'est pas définie dans une propriété raccourcie background appliqué à l'élément après une définition de background-position, la valeur de cette propriété est réinitialisée à sa valeur initiale par la propriété raccourcie.
    • Valeur initiale 0% 0%
    • S'applique à tous les éléments
    • Héritée non
    • Pourcentages se réfère à la taille de la zone de positionnement de l'arrière-plan, moins la taille de l'image
    • Média visuel
    • Valeur calculée Si une ou deux valeurs sont indiquées, pour une <longueur> : la valeur absolue ; autrement un pourcentage. Si trois ou quatre valeurs sont indiquées, deux paires de mots-clés plus une longueur ou un pourcentage.

    Syntaxe

    background-position: [ [ <percentage> | <length> | left | center | right ]
       [ <percentage> | <length> | top | center | bottom ]? ] |
       [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
    

    Valeurs

    Accepte une ou deux valeur, jusqu'à quatres valeurs dans certains navigateurs. Les <percentage> négatifs et <longueur> négatives sont acceptés.

    Les combinaisons de mots-clefs, de longueurs et de pourcentages sont autorisées. Cependant si les mots-clefs sont mélangés avec d'autres valeurs, left et right ne doivent être utilisés que comme première valeur et les mots clefs top et bottom comme seconde valeur.

    Si une seule valeur est indiquée, la seconde sera traitée comme étant center.

    Si aucune des valeurs définies est un mot-clé, la première valeur représentera la position horizontale et la seconde valeur présentera la position verticale.

    La dernière spécification autorise l'utilisation de quatres valeurs afin de décaler l'image d'arrière-plan depuis n'importe quel coin, et pas seulement le coin supérieur gauche. Se référer au tableau de compatibilité des navigateurs pour le support.

    <pourcentage>
    Avec la paire de valeurs 0% 0%, le coin supérieur gauche de l'image est aligné avec le coin supérieur gauche de la bordure de l'espacement de la boîte. La paire de valeurs 100% 100% place le coin inférieur droit de l'image dans le coin inférieur droit de l'aire d'espacement. Avec la paire de valeurs 14% 84%, le point situé à 14% vers la droite et 84% vers le bas de l'image est placé au point situé à 14% vers la droite et 84% vers le bas de l'aire d'espacement.
    <longueur>
    Avec la paire de valeur 2cm 1cm, le coin supérieur gauche de l'image est placé à 2 cm à droite et à 1 cm en dessous du coin supérieur gauche de l'aire d'espacement.
    top
    Correspond à 0% pour la position verticale.
    bottom
    Correspond à 100% pour la position verticale.
    left
    Correspond à 0% pour la position horizontale.
    right
    Correspond à 100% pour la position horizontale.
    center
    Correspond à 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

    Combinaisons de mots-clés

    top left et left top
    Identique à '0% 0%'.
    top, top center et center top
    Identique à '50% 0%'.
    right top et top right
    Identique à '100% 0%'.
    left, left center et center left
    Identique à '0% 50%'.
    center et center center
    Identique à '50% 50%'.
    right, right center et center right
    Identique à '100% 50%'.
    bottom left et left bottom
    Identique à '0% 100%'.
    bottom, bottom center et center bottom
    Identique à '50% 100%'.
    bottom right et right bottom
    Identique à '100% 100%'.

    Exemples

    Voir l'exemple sur une page

    .exampleun {
    	background-image: url("logo.png");
    	background-position: top;
    }
    
    .exampledeux {
    	background-image: url("logo.png");
    	background-position: 25% 75%;
    }
    
    .exampletrois {
    	background: url("logo.png") 2cm bottom;
    }
    
    .examplequatre {
    	background-image: url("logo.png");
    	background-position: center 10%;
    }
    
    .examplecinq {
    	background: url("logo.png") 3em 50%;
    }
    
    .examplesix {
    	background-image: url("logo.png");
    	background-position: right 20px bottom 20px;
    }
    	
    .examplesept { /* Images de fond multiples : 
                      chaque image est associée avec la position correspondante, 
                      de la première à la dernière. */
      background-image: url("img1.png"), url("img2.png");
      background-position: 0px 0px, center;
    } 
    

    Spécifications

    Spécification Statut Commentaire
    CSS Backgrounds and Borders Module Level 3 Candidate Recommendation Ajout du support pour les fonds multiples, la syntaxe à quatre valeurs et modification de la définition du pourcentage pour correspondre avec les implémentations.
    CSS 2.1 Recommendation Autorise le mélange de valeurs mots-clef, <longueur> et <percentage>.
    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)
    Syntaxe à 4 valeurs Pas de support WebKit bug 37514 13.0 (13.0) 9.0 10.5 Pas de support WebKit bug 37514
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base (Oui) 1.0 (1) (Oui) (Oui) (Oui)
    Fonds multiples ? 1.0 (1.9.2) ? ? ?
    Syntaxe à 4 valeurs Pas de support 13.0 (13.0) ? ? Pas de support

    Voir également

    Background-related CSS properties: background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon, Fredchat, teoli, enogael, Mgjbot, FredB, Kyodev
    Dernière mise à jour par : enogael,