CSS - Propriété background-attachment
Description.
background-attachment définit le défilement de l'image d'arrière-plan.
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
sur la propriété background.
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 ar/rière-plans, dans l'ordre défini par Object. Pour plus de précisions sur les arrière-plans multiples, reportez vous à la pagebackground.-
Reportez-vous à la description générale de ces valeurs.
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.
background-attachment :
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é).
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Arrière-plan - Propriétés.
background: Résumé des propriétés de l'arrière-plan.background-blend-mode: Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.background-clip: Interaction entre arrière-plan et bordure.background-color: Définit la couleur de l'arrière-plan.background-image: Image d'arrière-plan.background-origin: Position de l'image d'arrière-plan.background-position: Emplacement de l'image d'arrière-plan.background-repeat: Mode de répétition de l'image d'arrière-plan.background-size: Dimensionnement de l'image d'arrière-plan.isolation: Gère l'interaction entre les couches.mix-blend-mode: Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.opacity: Opacité (ou transparence).
Arrière-plan - Fonctions.
conic-gradient(): Définit un dégradé de couleurs conique.linear-gradient(): Détermine un dégradé de couleur linéaire.radial-gradient(): Détermine un dégradé de couleur radial (depuis le centre vers les bords).repeating-conic-gradient(): Définit un dégradé de couleurs conique, avec répétitionrepeating-linear-gradient(): Détermine un dégradé de couleur linéaire avec répétition.repeating-radial-gradient(): Détermine un dégradé de couleur radial avec répétition.