Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.

    Propriété background-origin

  • 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 :
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 les versions antérieures   Afficher la version à venir  

Voir aussi...

Arrière-plan - Propriétés.

Arrière-plan - Fonctions.