Comment Changer l'Image de Fond en Défilement Avec CSS?

CSS aide à créer des effets formidables dans utiliser JavaScript dans votre code.

L'un des effets garde l'arrière-plan fixé, tandis que le premier plan est en défilement.

Comment changer l'image de fond en défilement? Cela est beaucoup plus facile que vous croyez!

Créons un code et voyons le résultat.

1. Créez HTML.

Créez sept balises <div> avec les classes suivantes:

<div class="image one"></div>
<div class="image two"></div>
<div class="image three"></div>
<div class="image four"></div>
<div class="image five"></div>
<div class="image six"></div>
<div class="image seven"></div>
<div class="content">W3DOCS</div>

2. Ajoutez CSS.

Le style pour la classe .image sera appliqué à toutes les images.
Centrez les images avec la propriété background-position.
Définissez la propriété background-repeat à "no-repeat" pour que les images ne soient pas répétées.
Définissez background-size à "cover" pour redimensionner les images aussi grandes que possible pour couvrir toute la zone du fond.

.image {
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Ajoutez les liens des images avec la propriété background-image.

.one {
  background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
}

Stylisez le contenu en lui donnant border et en définissant width et height.
Définissez position à "fixed" pour qu'elle soit fixée en étant défilé.
Stylez le texte avec les propriétés color, font-weight et font-size.
Utilisez la valeur "translate" de la propriété transform, où la première valeur déplacera l'élément vers le gauche (valeurs négatives vers le gauche). La deuxième valeur le déplacera vers le haut (valeurs négatives vers le haut).
Centrez le contenu à l'aide de la propriété text-align.
Donnez padding pour créer un espace à tous les côtés du contenu de l'élément.
Ajoutez z-index qui spécifie son ordre dans un contexte d'empilement.
Spécifiez les bords des marges gauche et droite avec les propriétés left et right.
Donnez une couleur de l'arrière-plan au contenu avec la propriété background-color. Nous utilisons la valeur RGB.

.content {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff0c2;
  font-weight: bold;
  font-size: 60px;
  border: 8px solid #000000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 270px;
  padding: 50px;
  text-align: center;
}

On a besoin des dernières touches!

Définissez height de body à 100% et margin à 0.
Spécifiesz les noms de la famille de la police avec la propriété font-family.

body,
html {
  height: 100%;
  margin: 0;
  font-family: Helvetica, sans-serif;
}

Alors, voici le résultat final de notre code!

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        font-family: Helvetica, sans-serif;
      }
      .image {
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .one {
        background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
      }
      .two {
        background-image: url("https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80");
      }
      .three {
        background-image: url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1063&q=80");
      }
      .four {
        background-image: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
      }
      .five {
        background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
      }
      .six {
        background-image: url("https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80");
      }
      .seven {
        background-image: url("https://images.unsplash.com/photo-1543269865-96ae30571b5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
      }
      .content {
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff0c2;
        font-weight: bold;
        font-size: 60px;
        border: 8px solid #000000;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 270px;
        padding: 50px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="image one"></div>
    <div class="image two"></div>
    <div class="image three"></div>
    <div class="image four"></div>
    <div class="image five"></div>
    <div class="image six"></div>
    <div class="image seven"></div>
    <div class="content">W3DOCS</div>
  </body>
</html>

Essayez-vous-même!

Un bon exemple de plus de l'image de fond changée en défilement:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      .wrapper {
        height: 100%;
        font-family: Helvetica, sans-serif;
        line-height: 1.5;
        word-spacing: 2px;
        letter-spacing: 0.5px;
      }
      .fixed {
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: 100%;
        width: 100%;
        color: #eeeeee;
        text-align: center;
        display: table;
      }
      .fixed h2 {
        display: table-cell;
        vertical-align: middle;
      }
      .scroll {
        background-color: #ffe0f6;
        padding: 10px 70px;
        color: #666666;
      }
      .one {
        background-image: url("https://images.unsplash.com/photo-1530426509291-d831d721c7b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80");
      }
      .two {
        background-image: url("https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1190&q=80");
      }
      .three {
        background-image: url("https://images.unsplash.com/photo-1521165582142-eaf4bd77b3f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="fixed one"></div>
      <div class="scroll">
        <h3>
          "Dans la vie on ne fait pas ce que l'on veut mais on est responsable de ce que l'on est.."
        </h3>
      </div>
      <div class="fixed two"></div>
      <div class="scroll">
        <h3>
          "On passe une moitié de sa vie à attendre ceux qu'on aimera et l'autre moitié à quitter ceux qu'on aime.."
        </h3>
      </div>
      <div class="fixed three"></div>
    </div>
  </body>
</html>

Essayez-vous-même!