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.
background-origin: inherit | initial | unset;

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 :

padding-box

border-box

content-box

Donec dolor mi, iaculis a enim a, pellentesque hendrerit arcu. Nam nec urna eget lacus ornare lacinia a in velit. Suspendisse nec lacus nec elit viverra commodo ut nec sapien. Nunc vitae lorem quam. Ut in dictum sapien, quis maximus urna.

Donec dolor mi, iaculis a enim a, pellentesque hendrerit arcu. Aliquam bibendum eu enim ut tempor. Nam nec urna eget lacus ornare lacinia a in velit. Suspendisse nec lacus nec elit viverra commodo ut nec sapien. Nunc vitae lorem quam. Ut in dictum sapien, quis maximus urna. Aliquam at libero odio. Ut nisl metus, dictum ac varius in, porta at risus. Nam posuere est fringilla pretium rutrum. Aenean in magna ipsum. In nulla enim, pellentesque id tincidunt cursus, ultricies quis ligula.

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).

Afficher les versions antérieures Afficher la version à venir

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étition
repeating-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.

Une remarque ? Une suggestion ?...