Comment Utiliser des Images Multiples de l'Arrière-plan Avec CSS

CSS3 permet d'ajouter des images multiples de l'arrière-plan pour un élément donné simplement en utilisant une liste séparée de virgules pour spécifier autant que vous voulez.

La liste de virgules des valeurs background-position et/ou background-repeat assigne la position et la répétition, respectivement, pour les multiples images de l'arrière-plan, tel que:

div {
  background-image: url(image1), url(image2), url(image3);
  background-position: center right, right bottom, center top;
  background-repeat: no-repeat, repeat-y, repeat-x;
}

Dans l'exemple donné, image1 est positionnée centre-droite et non répétée, image2 est positionnée droite-bas et répétée verticalement, et image3 isest positionnée centre-haut et répétée horizontalement.

Cela est l'un des moyens de définir des images multiples. Cela est pour spécifier l'image à l'aide de la propriété background-image, ensuite spécifier la position des images avec la propriété background-position et spécifier si les images doivent être répétées ou non avec la propriété background-repeat.

Le deuxième moyen est l'ajout des images multiples en utilisant la propriété background:

div {
  background: url("image1") no-repeat center bottom,
    url("image2") no-repeat center top, blue;
}

Lorsqu'on applique la propriété background-color aux images multiples de l'arrière-plan, la couleur est appliquée à la fin à l'arrière de toutes les images de l'arrière-plan. Comme vous le voyez dans l'exemple ci-dessus, la couleur bleu est placée à la fin.

Alors voyons comment on peut créer des images multiples de l'arrière-plan à l'aide de CSS pas à pas!

1. Créez HTML

Créez un élément <div> avec une classe nommée "example".

<div class="example"></div>

2. Créez CSS

Choisissez trois images. La taille doit être petite pour que vous puissez voir comment les propriétés background-position et background-repeat fonctionnent.
Appliquez un style à <div> et n'oubliez pas de lui donner une largeur et une hauteur.

.example {
  width: 100%;
  height: 500px;
  background: url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png")
      no-repeat 10% 110%,
    url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png")
      no-repeat 120% 700%,
    #002054;
}

Alors, voyons le résultat!

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
        width: 100%;
        height: 500px;
        background: url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png") no-repeat 10% 110%,
          url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png") no-repeat 120% 700%, #002054;
      }
    </style>
  </head>
  <body>
    <div class="example"></div>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #example {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 70%;
        background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"),
          url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom, rgba(255, 255, 255, 0), 40%, rgba(255, 255, 255, 1) 60%);
        background-size: 20%, 20%, 100%, 100%, 50px;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat;
        background-position: 5% 40%, 95% 60%, center bottom;
      }
    </style>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

Essayez-vous-même!