Réglage du GIF ' Format d'échange graphique ” en tant qu'image d'arrière-plan ajoute un élément visuellement attrayant au design. Le GIF permet aux développeurs de transmettre des informations ou de mettre en avant un produit ou un service qui contribue à créer l'identité visuelle d'une marque. Cependant, les développeurs doivent s'assurer que l'utilisation des GIF ne submerge pas la page Web ou ne détourne pas l'utilisateur du contenu principal.
Cet article explique la procédure de définition d'un GIF comme image d'arrière-plan sur la page Web.
Comment définir GIF comme image d'arrière-plan sur la page Web ?
Définir un GIF comme image d'arrière-plan aide à créer des éléments accrocheurs en ajoutant des éléments visuels.
Les GIF sont particulièrement utiles sur les sites Web qui souhaitent transmettre une impression de jeu ou de fantaisie, ou sur les pages qui souhaitent mettre en évidence un produit ou une fonctionnalité particulière. Pour le configurer, en tant qu'image d'arrière-plan, consultez les exemples suivants :
Exemple 1 : Définir GIF comme arrière-plan fixe
Comme les éléments HTML qui aident à créer le contenu de la page Web sont placés à l'intérieur du '
Par exemple, le « ' et ' ” Les balises sont utilisées comme contenu de la page Web. Voir l'extrait de code ci-dessous :
< corps >
< h1 > Paramètre GIF comme une image de fond sur la page h1 >
< p > Ce GIF a été ajouté comme une image de fond sur toute la page en utilisant 'image de fond' Propriété. Cet article a été propulsé par Linuxhint. p >
corps >
Maintenant, sélectionnez l'élément HTML 'body' à l'intérieur du ' ' tag ou dans un séparé ' CSS ” fichier pour appliquer un style sur la page Web :
image de fond : url ( 'mer.gif' ) ;
répétition d'arrière-plan : pas de répétition ;
taille de fond : couverture ;
rembourrage : 50 px ;
taille de police : x-large ;
Couleur blanche;
}
Dans le bloc de code ci-dessus :
-
- Premièrement la ' URL() ” méthode est utilisée qui stocke le chemin de la “ GIF ' déposer. Et cette méthode est passée comme valeur au CSS ' image de fond ' propriété.
- Ensuite, réglez ' sans répétition « comme valeur au CSS » Répétition du fond ” propriété pour la répétition du fichier GIF.
- Ensuite, définissez la valeur de ' couverture « au CSS » taille d'arrière-plan ” propriété pour couvrir tout l'espace disponible
- Après cela, indiquez la valeur de ' 50px ' et ' x-large « au CSS » rembourrage ' et ' taille de police ” propriétés, respectivement. Cela ajoute un espacement autour du texte et agrandit la taille de la police.
Après la compilation, la page Web ressemble à ceci :
La sortie ci-dessus montre qu'un gif a été ajouté en arrière-plan sur la page Web.
Exemple 2 : Définition d'un GIF en tant qu'arrière-plan défilable
Au départ, créez une structure HTML pour créer un contenu de page Web comme celui-ci :
< div classe = 'contai' >< h1 > Paramètre GIF comme une image de fond sur la page h1 >
< p > Ce GIF a été ajouté comme une image de fond sur toute la page à l'aide du 'image de fond' Propriété. Cet article a été propulsé par Linuxhint. p >
div >
< div >
< h3 style = 'Couleur blanche;' > Contenu écrit en dehors du 'div' élément h3 >
div >
Dans le code ci-dessus :
-
- Tout d'abord, le parent ' ” tag est utilisé avec une classe de “ contenir ”.
- Ensuite, utilisez ' h1 ' et ' p ” Les éléments HTML et leur fournissent un contenu factice.
- Après cela, créez un autre '
» et utilisez le « ” en lui fournissant des données factices.Maintenant, ajoutez GIF comme arrière-plan sur la page Web en insérant les propriétés CSS suivantes :
.contai {
image de fond : url ( mer.gif ');
répétition d'arrière-plan : pas de répétition ;
taille de fond : couverture ;
hauteur : 100vh ;
affichage : flexible ;
align-items : center ;
justifier-contenu : centrer ;
flex-direction : colonne ;
Couleur blanche;
taille de police : grande ;
aligner le texte : centrer ;
rembourrage : 2rem ;
}
La description du bloc de code utilisé ci-dessus :-
- Tout d'abord, définissez le ' chemin de l'image ”, “ sans répétition t' et ' couverture « comme valeur au CSS » image de fond ”, “ Répétition du fond ' et ' taille d'arrière-plan ” propriétés, respectivement.
- Ensuite, définissez la valeur de ' 100vh ' et ' fléchir « au CSS » hauteur ' et ' afficher ' propriétés.
- Après cela, utilisez le CSS ' couleur ”, “ taille de police ”, “ aligner le texte ' et ' rembourrage ” propriétés pour appliquer un style au contenu.
Après la fin du processus de compilation, la page Web ressemble à ceci :
La sortie affiche que le ' GIF ” a été inséré comme image de fond sur toute la page.Conclusion
Pour définir le GIF comme image d'arrière-plan sur la page Web, le CSS ' image de fond ' La propriété est utilisée sur le HTML ' corps ' élément. La propriété CSS appliquée à l'élément 'body' est automatiquement appliquée à tous les éléments contenant. En réglant le ' 100vh ” en tant que valeur de la propriété height, l'effet de défilement peut également être activé. Il permet au gif d'arrière-plan de se déplacer le long du défilement. Cet article a montré comment définir un GIF comme image d'arrière-plan sur la page Web.
- Tout d'abord, le parent '