CSS - Propriété background-origin
Description de la propriété background-origin
.
background-origin
définit la référence pour positionner l'image d'arrière-plan.
La propriété background-position
positionne l'image d'arrière plan en fonction de
cette référence.
Cela n'empêche pas l'arrière-plan de s'étendre en deçà de cette référence.
Pour limiter l'arrière-plan à une certaine zone de l'élément, reportez-vous à la propriété background-clip
.
background-origin
est sans effet si la propriété background-attachment
a la valeur fixed
.
Pour une présentation générale des arrière-plans en CSS, reportez-vous à la page généralités sur les arrière-plans.
Syntaxes pour background-origin
.
background-origin: padding-box | border-box | content-box;
padding-box
est la valeur par défaut. Chacune de ces valeurs correspond à un point qui servira de référence pour positionner l'arrière-plan avec la propriétébackground-position
.-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
La simulateur applique la valeur choisie aux deux éléments ci-dessous. Pour le premier, l'image d'arrière-plan n'est pas répétée ; pour le deuxième elle l'est.
background-origin
:
Prise en charge par les navigateurs (compatibilité).
La propriété background-origin
ne présente pas de problème de compatibilité
sur les navigateurs actuels.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Arrière-plan - Propriétés.
background
: Résumé des propriétés de l'arrière-plan.background-attachment
: Mode de défilement de l'image d'arrière-plan.background-blend-mode
: Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.background-clip
: Interaction entre arrière-plan et bordure.background-color
: Définit la couleur de l'arrière-plan.background-image
: Image d'arrière-plan.background-position
: Emplacement de l'image d'arrière-plan.background-repeat
: Mode de répétition de l'image d'arrière-plan.background-size
: Dimensionnement de l'image d'arrière-plan.isolation
: Gère l'interaction entre les couches.mix-blend-mode
: Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.opacity
: Opacité (ou transparence).
Arrière-plan - Fonctions.
conic-gradient()
: Définit un dégradé de couleurs conique.linear-gradient()
: Détermine un dégradé de couleur linéaire.radial-gradient()
: Détermine un dégradé de couleur radial (depuis le centre vers les bords).repeating-conic-gradient()
: Définit un dégradé de couleurs conique, avec répétitionrepeating-linear-gradient()
: Détermine un dégradé de couleur linéaire avec répétition.repeating-radial-gradient()
: Détermine un dégradé de couleur radial avec répétition.