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 :

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.
Type de valeur
Valeur prédéfinie (plusieurs valeurs peuvent être énumérées dans le cas d'arrière-plans multiples).
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)
Statut du document:: CRD (document proposé pour la recommandation)

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:
Schéma syntaxique de la propriété CSS background-attachmentSyntaxe de background-attachment, propriété CSS relative à l'arrière-plan. scroll scroll fixed fixed local local , ,
;
  • 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.

  • background-attachment: initial; background-attachment: inherit; background-attachment: revert; background-attachment: revert-layer; background-attachment: unset;

    La valeur initiale est : scroll.

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.

background-attachment :
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é CSS background-attachment.
Colonne 2
Support de la propriété background-attachment avec la valeur fixed.
Colonne 3
Support de la propriété background-attachment avec la valeur local.
1
background-attachment
2
fixed
3
local
Estimation de la prise en charge en pourcentage du parc actuel.
79%
77%
77%

Navigateurs 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

Oméra mini

Voir aussi, dans le même module de standardisation que background-attachment.

Les spécifications CSS éditées par le W3C sont organisées en modules. background-attachment fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.