Ce guide d'étude vous 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 SSC ' arrière-plan ” est une propriété abrégée qui contient les propriétés background, background-attachment, clip, image, repeat, origin, size et position. La propriété background 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 contient une seule image comme logo de la page Web tandis que le second contient trois images.
Exemple : Ajouter plusieurs images d'arrière-plan avec CSS
En HTML, ajoutez un élément div pour le logo et spécifiez le nom de la 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 la classe selon vos préférences.
HTML
< div classe = 'logo' >< / div >< div classe = 'images multiples' >< / div >
Dans la section suivante, nous ajusterons les images à l'aide de la propriété CSS background.
Style 'logo' div
.logo {largeur : 100% ;
hauteur : 50px ;
rembourrage : 5px ;
marge : 5px ;
taille d'arrière-plan : 100px ;
Répétition du fond : sans répétition ;
image de fond : URL ( images/logo-linux.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 définir la hauteur de l'élément sur ' 50px ”.
- ' rembourrage La propriété ' est utilisée pour définir la propriété ' 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 d'arrière-plan ” définit la taille de l'image d'arrière-plan de l'élément sur “ 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 auto ;
rembourrage : 20px ;
taille d'arrière-plan : 150px ;
Couleur de l'arrière plan : RVB ( 157 , 154 , 151 ) ;
image de fond : URL ( images/bureau.png ) , URL ( images/html.png ) , URL ( images/portable.png ) ;
Répétition du fond : sans répétition , sans répétition , sans répétition ;
position d'arrière-plan : gauche , centre , droite ;
}
Maintenant, stylisez l'autre conteneur comme suit :
- ' Couleur de l'arrière plan ” propriété spécifie la couleur de fond de l'élément.
- ' image de fond ” propriété spécifie plusieurs URL d'image.
- ' Répétition du fond ” La propriété définit les valeurs des images dans une séquence d'images spécifiées dans la propriété background-image. Les deux images sont définies comme non répétées, ce qui signifie qu'elles ne s'afficheront qu'une seule fois sur le navigateur.
- ' position d'arrière-plan ” ajuste la position de l'image dans la séquence des images spécifiées par la propriété background-image. La première image sera placée sur le côté gauche, la deuxième au centre et la troisième sera placée sur le côté droit.
En fournissant le code fourni 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 des propriétés d'arrière-plan CSS, telles que background-position, background-repeat, background-size, etc. Ce manuel a démontré l'utilisation de plusieurs images d'arrière-plan avec des exemples CSS.