Comment utiliser plusieurs images d'arrière-plan avec CSS

Tout en développant n'importe quelle application, le développeur doit maintenir l'interactivité de l'application. Il existe plusieurs fonctionnalités qui peuvent aider à attirer l'attention de l'utilisateur, telles que les couleurs, les images, les GIF et plus. Pour ajouter une image au site Web, HTML "»La balise peut être utilisée. Alors que pour ajouter plusieurs images avec CSS, le «image de fond»La propriété est utilisée avec les URL des images.

Ce guide d'étude montrera comment utiliser des images d'arrière-plan avec CSS. Alors, commençons!

Comment utiliser plusieurs images d'arrière-plan avec CSS?

Le CSS "arrière-plan”La propriété est une propriété raccourci qui contient des propriétés d'arrière-plan, d'attachement d'arrière-plan, d'image, de répétition, d'origine, de taille et de position. La propriété d'arrière-plan peut être utilisée pour spécifier les URL de plusieurs images. Ces images sont ensuite positionnées et définies en conséquence.

Prenons un exemple dans lequel un élément div ne contient qu'une seule image comme logo de la page Web tandis que le second contient trois images.

Exemple: ajout de plusieurs images d'arrière-plan avec CSS

Dans HTML, ajoutez un élément div pour le logo et spécifiez le nom de classe. Par exemple, nous l'avons nommé «logo". La deuxième div utilise plusieurs images, nous l'avons donc nommée «images multiples". Cependant, vous pouvez spécifier le nom de classe selon vos préférences.

Html

Dans la section suivante, nous ajusterons les images à l'aide de la propriété d'arrière-plan CSS.

Style «logo» div

.logo
Largeur: 100%;
hauteur: 50px;
rembourrage: 5px;
marge: 5px;
taille arrière: 100px;
République de fond: sans répétition;
Image d'arrière-plan: URL (Images / Linux-Logo.png);

L'élément div avec la classe "logo«Est appliqué avec les propriétés suivantes:

• "largeur«La propriété est utilisée pour définir la largeur de l'élément sur«100%".
• "hauteur»La propriété est utilisée pour régler la hauteur de l'élément sur«50px".
• "rembourrage«La propriété est utilisée pour définir le«5px”Espace autour du contenu spécifié de l'élément.
• "marge«La propriété est utilisée pour définir le«5px”Espace autour de l'élément.
• "taille de l'arrière-plan»La propriété définit la taille de l'image de l'arrière-plan de l'élément comme«100px".
• "Répétition du fond"Avec la valeur"sans répétition»Affiche l'arrière-plan une seule fois.
• "image de fond»La propriété est utilisée pour spécifier l'URL de l'image.

Style «Images multiples» div

.images multiples
Largeur: 90%;
Hauteur: 45VH;
marge: 1px automatique;
rembourrage: 20px;
taille arrière: 150px;
Color en arrière-plan: RVB (157, 154, 151);
Image d'arrière-plan: URL (images / bureau.png), URL (images / html.png), URL (images / ordinateur portable.png);
République de fond: sans répétition, sans répétition, sans répétition;
Position d'arrière-plan: gauche, centre, à droite;

Maintenant, style l'autre conteneur comme suit:

• "Couleur de l'arrière plan»La propriété spécifie la couleur de l'arrière-plan de l'élément.
• "image de fond»La propriété spécifie plusieurs URL d'image.
• "Répétition du fond»La propriété définit les valeurs pour les images dans une séquence des images spécifiées dans la propriété en arrière-plan-image. Les deux images sont définies comme non répétitives signifient qu'elles ne s'afficheront sur le navigateur qu'une seule fois.
• "position de fond”Ajuste la position de l'image dans la séquence des images spécifiées par la propriété d'image d'arrière-plan. La première image sera réglée sur le côté gauche, le second au centre et le troisième sera placé sur le côté droit.

En fournissant le code ci-dessus, le résultat dans le navigateur ressemblera à ceci:

De cette façon, nous pouvons ajuster la position de plusieurs images avec CSS.

Conclusion

Pour rendre l'application divertissante et interactive, les développeurs utilisent différentes images et couleurs. Nous pouvons définir plusieurs images avec les propriétés d'arrière-plan CSS, telles que la position d'arrière-plan, le répétition d'arrière-plan, la taille de l'arrière-plan, et plus. Ce manuel a démontré l'utilisation de plusieurs images d'arrière-plan avec des exemples CSS.