La background-originpropriété définit où peindre l'arrière-plan: sur tout l'élément, à l'intérieur de la bordure ou à l'intérieur du remplissage.
Il y a quatre valeurs: border-box, padding-box, content-boxet inherit. Voici une démo:
Voir la démonstration de Pen Background Origin par Timothy Miller (@tjacobdesign) sur CodePen.
background-origin est similaire à background-clip, sauf qu'il redimensionne l'arrière-plan plutôt que de le couper.
L'exemple ci-dessus a background-size: coveret background-repeat: no-repeatégalement appliqué. Si ce n'était pas le cas, l'image se répéterait sous la bordure ou le remplissage.
En rapport
- background-attachment
- clip de fond
- Couleur de l'arrière plan
- image de fond
- position de fond
- Répétition du fond
- taille de fond
Plus de ressources
- Spécification CSS3
- MDN
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 3+ | 4+ | 10,5+ | 9+ | Travaux | Travaux |