Background-origin - Propriété CSS

Schéma de la syntaxe de background-origin.

• Dans le cas d'arrière-plans multiples, on énumère plusieurs valeurs séparées par une virgule.

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

Valeurs pour background-origin.

• background-origin: padding-box; background-origin: border-box; background-origin: 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: border-box, border-box, ...;

  dans le cas d'arrière-plans multiples, plusieurs valeurs peuvent être fournies pour background-origin en les séparant par une virgule.

  Pour plus d'informations sur les arrière-plans multiples, reportez-vous à la page Les arrière-plans multiples.

• background-origin: initial; (padding-box) background-origin: inherit; background-origin: revert; background-origin: revertLayer; background-origin: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Accéder à la propriété background-origin par programme.

Modifier la valeur de background-origin en Javascript.

En Javascript, selon la syntaxe choisie, le nom de la propriété peut être écrit en kebab-case (un tiret entre les mots) ou en camel-case (une majuscule pour séparer les mots). La valeur par contre doit toujours être écrite conformément à la syntaxe CSS, c'est à dire en kebab-case.

let el = document.getElementById('id'); el.style['background-origin'] = 'border-box'; // ou let el = document.getElementById('id'); el.style.backgroundOrigin = 'border-box';

Lire en Javascript la valeur de background-origin.

Le code ci-dessous fonctionne lorsque la propriété a été affectée directement à l'élément lui-même, via l'attribut style du HTML, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['background-origin']; // ou let el = document.getElementById('id'); let value = el.style.backgroundOrigin;

Lire la valeur calculée de background-origin en Javascript.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages et de la résolution des conflits éventuels (voir les Les priorités). La valeur calculée peut donc être la valeur affectée à l'élément via l'attribut style du HTML, une valeur affectée via un sélecteur CSS, une valeur héritée, ou à défaut, la valeur initiale de la propriété : padding-box dans le cas de background-origin.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('background-origin');

Modifier la valeur de la propriété background-origin avec JQuery.

Le nom de la propriété peut être écrit indifféremment en notation kebab-case ou en notation camel-case.


$('#id').css('background-origin', 'border-box');
// ou
$('#id').css('backgroundOrigin', 'border-box');


Lire la valeur calculée de la propriété background-origin avec JQuery.

let value = $('#id').css('background-origin');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété background-origin et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée.

Exemple interactif avec la propriété background-origin.

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.

Compatibilité des navigateurs avec background-origin.

La propriété background-origin ne présente pas de problème de compatibilité sur les navigateurs actuels.

1

Propriété
background-origin

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété background-origin.

• Module CSS - Arrière-plans et bordures - Niveau 3

  Première définition de la propriété background-origin.
  

  02 Août 2002

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des arrière-plans.

Tout ce qui concerne les arrière-plans et les bordures et décrit dans la spécification du W3C "CSS Backgrounds and Borders Module". Voici la liste des principales propriétés décrites dans cette norme.

Propriétés :