mozilla
Vos résultats de recherche

    background-origin

    Résumé

    La propriété CSS background-origin détermine la zone de positionnement de l'arrière-plan, soit la position de l'origine d'une image spécifiée en utilisant la propriété CSS background-image.

    Il faut noter que background-origin est ignorée si background-attachment est défini à fixed.

    Si la valeur de la propriété n'est pas définie dans la propriété raccourcie background qui s'applique à l'élément après la propriété CSS background-origin, la valeur de cette propriété est alors réinitialisée par la propriété raccourcie.

    Syntaxe

    background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
    

    Valeurs

    border-box
    L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (tout en restant en-dessous de la bordure sur l'axe z).
    padding-box
    Aucun arrière-plan n'est dessiné en-dessous de la bordure (l'arrière-plan s'étend jusqu'à la bordure extérieure du padding).
    content-box
    L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu.

    Exemples

     .example {
       border: 10px double;
       padding: 10px;
       background: url('image.jpg');
       background-position: center left;
       /* L'arrière-plan sera dans le padding */       
       background-origin: content-box;
    }
    
    div {
      background-image: url('mainback.png'), url('logo.jpg');
      background-position: 0px 0px, top right;
      background-origin: padding-box, content-box;
    }
    

    Spécifications

    Spécification Statut Commentaire
    CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
    content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] Pas de support 3.0 (522) [3]
    Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base ? ? ? ? ?
    content-box ? ? ? ? ?

    [1] Gecko supporte, depuis la version 1.1 jusqu'à la version 1.9.2, ce qui correspond à Firefox 1.0 jusqu'à Firefox 3.6 inclus, la syntaxe préfixée : -moz-background-origin: padding | border.

    [2] Internet Explorer jusqu'à la version 7 se comporte comme si la propriété suivante était définie : background-origin: border-box; Internet Explorer 8 se comporte comme si la propriété suivante était définie : background-origin: padding-box; ce qui est la valeur par défaut habituelle.

    [3] Webkit support aussi une version préfixée de cette propriété, qui dans le cas présent accepte, en plus des mots-clés actuels, les synonymes suivants : padding, border, et content.

    [4] Konqueror 3.5.4 supporte -khtml-background-origin.

    Voir également

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: FredB, Fredchat, Kyodev, teoli, Mgjbot
    Dernière mise à jour par : teoli,
    Masquer la barre latérale