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.Per grammar : sérialisation dans l'ordre de la syntaxe.Syntaxe de background-attachment (schéma).
background-attachment.Détails sur les valeurs.
Télécharger le schéma en SVG.
Description de la propriété background-attachment.
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.
Valeurs pour 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, ce qui est assez perturbant lorsqu'il n'est visible que dans un élément, et que la page défile.
- 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. - background-attachment: initial; (
scroll) background-attachment: inherit; background-attachment: revert; background-attachment: revert-layer; background-attachment: revert-rule; background-attachment: unset;Liens vers la présentation de ces différentes valeurs :
initial,inherit,revert,revert-layer,revert-rule,unset.
La propriété background-attachment et Javascript.
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 avec 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');
Lire ou modifier la valeur de la propriété background-attachment avec JQuery.
// Lire la valeur :
$('#id').prop('background-attachment');
// Écrire la valeur :
$('#id').prop('background-attachment', 'fixed');
$('#id').prop('{background-attachment': '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. Dans le cas de la propriété background-attachment cela sera la même chose, sauf si vous entrez une valeur incorrecte. Dans ce cas
la valeur affectée sera nulle et la valeur calculée est remise à la valeur initiale de la propriété.
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.
Exemple : un village peut avoir un arrière-plan montagneux.
Support de background-attachment.
background-attachment est bien reconnue par tous les navigateurs actuels.
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.
background-attachmentNavigateurs 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
Évolution de la propriété background-attachment..
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernantbackground-attachmentDé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
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantbackground-attachmentPrise 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
Le niveau 3 de la spécification décrit en plus comment positionner le fond par rapport à la zone d'arrière-plan, et comment le découper.
Concernant les bordures, la notion de bordure image est introduite, ainsi que la notion d'arrondi d'angle et d'ombrage de boîte.Concernantbackground-attachmentAjout de la valeurlocal.
Possibilité d'arrière-plans multiples.02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation. -
Module CSS - Arrière-plans et bordures - Niveau 4
Le niveau 4 de la spécification introduit les valeurs logiques, dépendantes du mode d'écriture.
Concernantbackground-attachmentPas de changement concernant la propriétébackground-attachment.25 Novembre 2025Document de travail.
Voir aussi, au sujet des arrière-plans.
La spécification "module CSS - Arrière-plans et bordures" du W3C regroupe tout ce qui concerne les arrière-plans et les bordures, ce qui représente pas mal de propriétés :