La propriété CSS background-origin permet de définir la zone de positionnement de l'image d'arrière-plan. En spécifiant la position de départ de l'image d'arrière-plan, nous pouvons contrôler l'effet d'affichage de l'image d'arrière-plan. Dans cet article, nous examinerons en profondeur l’objectif, l’utilisation et l’exemple de code de l’attribut background-origin.
La position de départ de l'image d'arrière-plan peut être la zone de contenu, la zone de remplissage ou la zone de bordure. Nous pouvons spécifier ces options en définissant la valeur de l'attribut background-origin. Voici la syntaxe de base de l'attribut background-origin :
selector {
background-origin: value;
}
Dans le code ci-dessus, selector est le sélecteur d'élément auquel cet attribut est appliqué, et value est la valeur de l'attribut background-origin, qui peut être l'une des trois valeurs suivantes :
content-box: La position de départ de l'image d'arrière-plan commence à partir du coin supérieur gauche de la zone de contenu. C'est la valeur par défaut.padding-box: La position de départ de l'image d'arrière-plan est à partir du coin supérieur gauche de la zone de remplissage.border-box: La position de départ de l'image d'arrière-plan commence à partir du coin supérieur gauche de la zone de bordure.
Voici un exemple concret montrant comment utiliser l'attribut background-origin :
<!DOCTYPE html>
<html