Background-attachment - Propriété CSS
Résumé des caractéristiques de la propriété background-attachment
scroll | fixed | localscrollbackground-attachment passe d'une valeur à l'autre sans transition.Schéma syntaxique de background-attachment.
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;
scrollest la valeur par défaut pourbackground-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 parbackground-image. Chacune des valeurs s'applique à un des arrière-plans, dans l'ordre défini parbackground-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.
Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite travailler.
Celui ci pourra être initialisé par l'une ou l'autre de ces syntaxes :
var el = document.getElementById('...');
// ou
var el = document.querySelector('#...');
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).
function setBackgroundAttachment(el) {
el.style['background-attachment']='fixed';
// ou
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.
function getBackgroundAttachment(el) {
alert(el.style['background-attachment']);
// ou
alert(el.style.backgroundAttachment);
}
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.
function getCalcBackgroundAttachment(el) {
alert(window.getComputedStyle(el).getPropertyValue('background-attachment'));
}
Modifier la valeur de la propriété background-attachment avec JQuery.
function setBackgroundAttachment(el) {
$(el).css('background-attachment','local');
// ou
$(el).css('backgroundAttachment','local');
}
Lire la valeur calculée de la propriété background-attachment avec JQuery.
function getCalcBackgroundAttachment(el) {
alert($(el).css('background-attachment'));
// ou
alert($(el).css('backgroundAttachment'));
}
Simulateur.
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.
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é).
background-attachment.
background-attachment avec la valeur fixed.
background-attachment avec la valeur local.
background-attachmentfixedlocalNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
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 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne 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 valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Arrière-plans et bordures - Niveau 3
Ajout de la valeurlocal.
Possibilité d'arrière-plans multiples.02 Août 2002Document de travail.
17 Décembre 2009Candidat à 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 :