background-attachment

Syntaxe

Paramètres

Description

Cette propriété permet de fixer l'effet de déplacement d'immobilité de l'arrière-plan lorsqu'on déplace la fenêtre du navigateur.

Remarques

• Contrôle du comportement du fond : La propriété background-attachment détermine si l'image de fond reste fixe lorsque l'utilisateur fait défiler la page ou si elle se déplace avec le contenu. Elle prend principalement trois valeurs : scroll, fixed, et local. Cela permet de contrôler si le fond reste en place ou se déplace par rapport à la fenêtre ou à l'élément contenant.
• Valeur scroll (comportement par défaut) : La valeur par défaut de background-attachment est scroll. Cela signifie que l'image de fond défile avec le contenu de la page, c'est-à-dire qu'elle se déplace verticalement ou horizontalement lorsque l'utilisateur fait défiler la page. C'est l'option la plus couramment utilisée dans la conception de pages Web standards.
• Valeur fixed (fond fixe) : Lorsque la propriété est définie sur fixed, l'image de fond reste immobile, même lorsque l'utilisateur fait défiler la page. Cela peut être utilisé pour créer des effets de parallaxe où le fond semble ne pas bouger, tandis que le contenu de la page défile au-dessus de lui, créant ainsi une impression de profondeur.
• Valeur local (fond lié à l'élément) : La valeur local signifie que l'image de fond se déplace avec le contenu d'un élément lorsque cet élément est défilé. Par exemple, dans un div avec une barre de défilement interne, l'image de fond se déplace en même temps que le contenu de ce div. Cela peut être utilisé pour des effets visuels dans des zones scrollables spécifiques.
• Applications en design interactif : La combinaison de background-attachment: fixed avec des effets de défilement ou de parallaxe est très populaire dans le design web moderne, notamment pour les pages d'accueil ou les sites cherchant à offrir une expérience visuelle dynamique. Ce style est utilisé pour donner l'impression que l'arrière-plan est "figé" dans l'espace pendant que le contenu au premier plan défile.
• Performance et compatibilité : Bien que l'effet de fond fixe (background-attachment: fixed) soit visuellement impressionnant, il peut parfois avoir un impact sur les performances, en particulier sur les appareils mobiles. Sur certains navigateurs ou plateformes, cela peut entraîner des ralentissements, car le navigateur doit recalculer la position de l'image de fond au fur et à mesure du défilement.
• Comportement sur les éléments avec un défilement interne : Lorsqu'un élément a un contenu pouvant défiler (par exemple, une zone avec overflow: auto ou overflow: scroll), et que la propriété background-attachment est définie sur local, l'image de fond se déplace avec l'élément. Cela peut être utile pour des effets de fond plus cohérents dans des zones de contenu spécifiques, tout en permettant un défilement normal du reste de la page.
• Problèmes de compatibilité avec les anciennes versions de navigateurs : Certains anciens navigateurs, notamment Internet Explorer, ont des limitations dans le support de la propriété background-attachment: fixed. Dans ces cas, l'effet peut ne pas être rendu correctement ou ne pas être pris en charge du tout. Il est donc important de tester les comportements sur différents navigateurs et versions pour garantir une expérience utilisateur cohérente.

Exemple

on obtiendra le résultat suivant :