Vos résultats de recherche

    background-origin

    La propriété background-origin détermine la zone de positionnement de l'arrière-plan. Autrement dit, elle permet de définir la position de l'origine de l'image définie par la propriété background-image.

    background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

background-origin: inherit;

    Attention, background-origin est ignorée lorsque background-attachment vaut fixed.

    Note : Cette propriété est rattachée à la propriété raccourcie background. Aussi, si on a une déclaration background-origin avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour background-origin.

    Valeur initialepadding-box
    Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
    Héritéenon
    Médiavisuel
    Valeur calculéecomme spécifié
    Type d'animationdiscrète
    Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

    Syntaxe

    Valeurs

    border-box
    L'arrière-plan s'étend jusqu'à la bordure extérieure de la boîte de bordure (il est, selon l'axe z, situé sous la bordure).
    padding-box
    Aucun arrière-plan n'est dessiné sous la bordure. Autrement dit, l'arrière-plan s'étend jusqu'au bord extérieur de la boîte de remplissage (padding).
    content-box
    L'arrière-plan est uniquement dessiné sur la boîte de contenu.

    Syntaxe formelle

    <box>#
    où 
    <box> = border-box | padding-box | content-box

    Exemples

    CSS

    div {
  width: 200px;
  height: 100px;
}

.exemple {
  border: 10px double;
  padding: 10px;
  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
  background-color: palegreen;
  background-position: 0px 40px;
  background-origin: content-box;
  background-repeat: no-repeat;
}

    HTML

    <div class="exemple"></div>

    Résultat

    Spécifications

    Spécification État Commentaires
    CSS Backgrounds and Borders Module Level 3
    La définition de 'background-origin' dans cette spécification.    		 Candidat au statut de recommandation Définition initiale.

    Compatibilité des navigateurs

    FonctionnalitéChromeFirefoxEdgeInternet ExplorerOperaSafariServo
    Support simple1.014.02 3129.0410.53.01?
    content-box1.04.02129.0510.53.01?
    FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
    Support simple4.1(Oui)(Oui)14.07.112.1(Oui)
    content-box4.1(Oui)(Oui)14.07.112.1(Oui)

    1. Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

    2. Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

    3. Since Firefox 49, also supports the -webkit prefixed version of the property.

    4. In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.

    5. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.

    Étiquettes et contributeurs liés au document

    Étiquettes : 
     Contributeurs à cette page : SphinxKnight, teoli, FredB, Mgjbot, Kyodev, Fredchat
     Dernière mise à jour par : SphinxKnight,