Background-attachment - Propriété CSS

background-attachment

Résumé des caractéristiques de la propriété `background-attachment`

Description rapide

Mode de défilement de l'image d'arrière-plan.

Statut

Standard

S'applique à

Tous les éléments.

Utilisable sur

HTML

Valeurs prédéfinies

scroll | fixed | local

Pourcentages

Ne s'appliquent pas.

Valeur initiale

scroll

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété background-attachment passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Arrière-plans et bordures

Références (W3C)

🡇

🡅

CSS Backgrounds and Borders Module Level 3

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma syntaxique de `background-attachment`.

Schéma syntaxique de background-attachment

Description.

background-attachment définit à quoi est "accrochée" l'image d'arrière-plan, autrement dit, est-ce que cette image d'arrière-plan est fixe ? Est-ce qu'elle défile avec la page ? Ou bien encore est-ce qu'elle défile avec le contenu de l'élément (lorsque l'élément comporte une barre de défilement). Cette propriété est souvent appliquée à la balise body mais est également intéressante pour de nombreuses autres balises : div, span, etc. Si aucune image d'arrière-plan n'est définie, cette propriété n'a aucun effet.

Pour une explication générale sur le fonctionnement des arrière-plans, reportez-vous à la page généralités sur les arrière-plans.

Syntaxes de `background-attachment`.

background-attachment: scroll;

scroll est la valeur par défaut pour background-attachment.
L'arrière-plan est attaché à l'élément : il suit l'élément dans son déplacement mais reste fixe si le contenu de l'élément défile.
background-attachment: fixed;

L'arrière-plan ne défile jamais.
background-attachment: local;

L'arrière-plan est attaché au contenu de l'élément : il défile avec le contenu de l'élément, et donc également avec l'élément lui même si celui-ci se déplace.
background-attachment: local, fixed, fixed...;

Cette syntaxe de background-attachment, qui comporte une série de valeurs séparées par des virgules, est utilisable lorsque plusieurs arrière-plans ont été définis par background-image. Chacune des valeurs s'applique à un des arrière-plans, dans l'ordre défini par background-image. Pour plus de précisions sur les arrière-plans multiples, reportez vous à la page arrière-plans multiples.

Valeurs standards acceptées par toutes les propriétés:


background-attachment: initial  (scroll)
background-attachment: inherit
background-attachment: revert
background-attachment: revertLayer
background-attachment: unset

Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Manipulation de la propriété `background-attachment` par programme.

Modifier la valeur de `background-attachment` en Javascript.

En Javascript, voici comment modifier la valeur de background-attachment pour l'élément el.

Pour désigner la propriété Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), ou une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['background-attachment'] = 'fixed';
	// ou
	let el = document.getElementById('id');
	el.style.backgroundAttachment = 'fixed';

Lire en Javascript la valeur de `background-attachment`.

Cet exemple de code renvoie la valeur de background-attachment si cette dernière a été initialisée dans l'attribut style de l'élément, dans le code HTML. Le code ne fonctionne pas si la propriété a été initialisée via un sélecteur CSS.


	let el = document.getElementById('id');
	el.style['background-attachment'] = 'fixed';
	// ou
	let el = document.getElementById('id');
	el.style.backgroundAttachment = 'fixed';

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

La valeur calculée est toujours définie : ce sera, soit la valeur affectée à background-attachment pour cet élément, via l'attribut style ou via un sélecteur CSS, soit une valeur héritée, soit encore la valeur initiale.


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

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


 $('#id').css('background-attachment', 'fixed');
 // ou
 $('#id').css('backgroundAttachment', 'fixed');

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


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

Testez vous-même.

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

Simulateur avec la propriété `background-attachment`.

Pour bien voir l'effet des différents valeurs de background-attachment faites défiler cette page et aussi le contenu de la zone ci-dessous en utilisant sa barre de défilement.

background-attachment :

scroll

fixed

local

Cuius acerbitati uxor grave accesserat incentivum, germanitate Augusti turgida supra modum, quam Hannibaliano regi fratris filio antehac Constantinus iunxerat pater.
Megaera quaedam mortalis,inflammatrix saevientis adsidua, humani cruoris avida nihil mitius quam maritus.
Qui paulatim eruditiores facti processu temporis ad nocendum per clandestinos versutosque rumigerulos conpertis leviter.
Addere quaedam male suetos falsa et placentia sibi discentes.
Adfectati regni vel artium nefandarum calumnias insontibus adfligebant.
Sed maximum est in amicitia parem esse inferiori.
Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo.
Numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis.
Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate.
Tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat.

Prise en charge par les navigateurs (compatibilité).

Colonne 1

Support de la propriété background-attachment.

Remarques :

(1) Ne supporte pas la valeur fixed pour la propriété background-attachment.
Ne supporte la valeur local que si des angles arrondis sont définis sur l'élément.

Porpriété
background-attachment

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Safari

Safari sur IOS

Samsung Internet

KaiOS Browser

Opéra mini

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

Caniuse

Historique de `background-attachment`.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Définition initiale de la propriété background-attachment.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Prise en compte de la valeur inherit.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Arrière-plans et bordures - Niveau 3

Ajout de la valeur local.
Possibilité d'arrière-plans multiples.

02 Août 2002
Document de travail.
17 Décembre 2009
Candidat à la recommandation.

Voir aussi, au sujet des bordures.

La spécification "CSS Backgrounds and Borders Module" du W3C regroupe tout ce qui concerne les arrière-plans, ce qui représente pas mal de propriétés :