background-origin |
Capture l'arrière-plan |
CSS3 |
|
Syntaxe
background-origin: border-box|content-box|inherit|initial|padding-box;
|
Paramètres
Paramètre |
Description |
border-box |
Ce paramètre permet d'indiquer que le début de l'image d'arrière-plan est dans le coin supérieur de la bordure. C'est la valeur par défaut. |
content-box |
Ce paramètre permet d'indiquer que le début de l'image d'arrière-plan est dans le coin supérieur du contenu. |
inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
padding-box |
Ce paramètre permet d'indiquer que le début de l'image est dans le coin supérieur de l'espacement. |
Description
Cette propriété permet d'indiquer l'emplacement où l'image d'arrière-plan est positionné.
Remarques
- Définition de la zone d'origine de l'arrière-plan : La propriété background-origin permet de définir la zone dans laquelle une image de fond doit commencer à
s'afficher. Cette zone détermine la position de l'image de fond par rapport à l'élément et affecte la manière dont l'image est placée par rapport à l'élément, en fonction des valeurs
choisies.
- Interaction avec background-clip : La propriété background-origin travaille en étroite collaboration avec background-clip. Tandis que
background-origin détermine la zone à partir de laquelle l'image de fond commence, background-clip détermine la zone à l'intérieur de laquelle l'image de fond doit
s'arrêter. Ces deux propriétés combinées permettent de contrôler précisément l'affichage et la position des arrière-plans dans un élément.
- Utilisation avec des bordures : Lorsque vous utilisez background-origin: border-box, l'image de fond s'étend au-delà de la zone de contenu et atteint les
bordures. Cela peut être utile pour créer des effets visuels où l'arrière-plan doit couvrir l'ensemble de l'élément, y compris ses bordures. Cette approche est souvent utilisée
pour des effets d'ombrage ou de texture qui doivent être appliqués à l'ensemble de l'élément.
- Précision avec content-box : La valeur background-origin: content-box permet de contrôler précisément où l'image de fond est placée, en excluant les bordures
et les espaces de remplissage. Cela peut être utile pour des éléments où l'arrière-plan ne doit pas interférer avec les bordures ou pour garantir que l'image de fond ne soit
visible que dans la zone de contenu.
- Applications pour des effets visuels : La propriété background-origin est particulièrement utile pour des conceptions où vous souhaitez personnaliser
l'affichage d'un arrière-plan en fonction de la structure de l'élément. Par exemple, dans un élément avec des bordures arrondies, vous pouvez utiliser
background-origin: padding-box pour que l'image de fond s'affiche uniquement à l'intérieur des coins arrondis, en excluant les bordures.
- Comportement par défaut : Par défaut, la valeur de background-origin est padding-box, ce qui signifie que l'image de fond commencera à partir de
la zone de remplissage de l'élément, excluant les bordures. Cela peut suffire dans la plupart des cas, mais pour des designs plus spécifiques, il peut être nécessaire de changer
la valeur de cette propriété.
- Compatibilité des navigateurs : La propriété background-origin est largement supportée par les navigateurs modernes, notamment
Google Chrome, Firefox,
Safari et Edge. Toutefois, comme pour toute fonctionnalité CSS, il est recommandé de tester
l'affichage de l'élément dans plusieurs navigateurs pour vérifier que le rendu est cohérent et compatible, en particulier pour les anciennes versions
d'Internet Explorer.
Dernière mise à jour : Dimanche, le 20 décembre 2015