Les images d'arrière-plan ont un grand impact sur l'apparence de tout site Web. Lorsque nous faisons défiler une page Web / contenu, quel sera le comportement de l'image d'arrière-plan? Qu'il se déplace également avec du contenu ou non.

Bien! Par défaut, l'image d'arrière-plan défile avec le contenu. La propriété d'attachement d'arrière-plan est spécifiquement utilisée pour déterminer la réponse de l'image d'arrière-plan. Il décide du comportement de l'image d'arrière-plan en utilisant les valeurs suivantes:

• fixé: L'attribution de la valeur fixe à l'image d'arrière-plan corrigera l'image sur la page Web.
• faire défiler: La valeur de défilement permet à une image de faire défiler avec le contenu.
• local: La valeur locale permet à une image de faire défiler avec le contenu d'un élément.

Cet article fournira une compréhension détaillée de la propriété de l'attachement des antécédents dans CSS. Pour une meilleure compréhension, cet article examinera certains exemples avec des valeurs d'attachement arrière.

Syntaxe

L'extrait ci-dessous décrit la syntaxe de la propriété d'attachement d'arrière-plan

Attachement des antécédents: valeur

Discutons de quelles valeurs la propriété de l'attachement des antécédents peut prendre.

valeur fixe

Le "fixé" la valeur définit l'image sur une position spécifique. L'image ne bougerait pas avec le contenu.

Exemple

Le code indiqué ci-dessous expliquera comment définir le fixé Valeur pour la propriété de l'attachement des antécédents

Html

Image en arrière-plan: fixe

Tout le contenu écrit ici!

CSS

corps
Image en arrière-plan: URL ("Couverture.jpg ");
République de fond: sans répétition;
Position d'arrière-plan: haut gauche;
Attachement de l'arrière-plan: fixe;

Le code ci-dessus génère la sortie suivante:

La sortie clarifie que l'image reste fixe.

valeur de défilement

Le "faire défiler" La valeur nous permet de faire défiler l'image avec le contenu. Pour une meilleure compréhension, considérez le code donné ci-dessous:

Html

Image d'arrière-plan: défilement

Tout le contenu écrit ici!

CSS

corps
Image en arrière-plan: URL ("Couverture.jpg ");
République de fond: sans répétition;
Position d'arrière-plan: haut gauche;
Attachement des antécédents: défilement;

Le code ci-dessus produira la sortie suivante:

valeur locale

La valeur locale déplace l'image avec le contenu de l'élément. Cependant, si vous implémentez le local dans l'exemple ci-dessus, le résultat ressemblera à la valeur de défilement. Donc, comment nous pouvons différencier les valeurs locales et défiles?

La différence entre les valeurs locales et de défilement peut être remarquée dans un scénario où il y a plusieurs zones de défilement sur une page Web.

Exemple

Cet exemple fournira le code de la valeur locale pour les zones de défilement multiples.

Html

Image en arrière-plan: local

Tout le contenu vient ici

CSS

.boîte

Largeur: 500px;
hauteur: 500px;
marge: 100px;
Border: 10px noir solide;
débordement: auto;
Image en arrière-plan: URL ("Couverture.jpg ");
République de fond: sans répétition;
Attachement des antécédents: local;

La sortie du code donné ci-dessus sera comme ceci:

Il y a deux barres de défilement dans la sortie ci-dessus. Quand nous déplacons une barre de défilement, je.e. interne ou externe L'image se déplace avec le contenu.

Dans le code ci-dessus, utilisez un défilement au lieu de local et observez la différence.

Scroll CSS

Attachement des antécédents: défilement;

La sortie suivante apparaîtra pour la valeur de défilement:

Il y a deux barres de défilement. Lorsque nous faisons défiler la barre extérieure, l'image se déplace avec le contenu. Et quand nous faisons défiler l'image de la barre intérieure est restée fixe.

Conclusion

La propriété d'attachement d'arrière-plan spécifie comment une image de fond se comportera. Il faut trois valeurs c'est-à-dire. fixe, défile, local. "fixé" Pour fixer l'image à une position spécifique, "faire défiler" pour déplacer l'image avec du contenu, et "local" Pour déplacer l'image avec le contenu de l'élément.

Cet article a présenté un aperçu détaillé de la propriété de l'attachement des antécédents. De plus, cet article a démontré comment utiliser la valeur fixe, défile et locale pour la propriété de pièce jointe.