Je rencontre des problèmes avec le dégradé d'arrière-plan CSS dans mon document HTML. J'ai conçu une page qui utilise un dégradé linéaire comme arrière-plan et le place sur l'élément body. Le problème auquel je suis confronté est que le dégradé semble se terminer là où l'écran se termine initialement, même s'il y a plus de contenu à faire défiler. Ainsi, lorsque vous faites défiler vers le bas, la deuxième instance du dégradé semble recommencer.

Voici mon code CSS (SCSS) actuel :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); body { min-height: 100vh; background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100)); color: whitesmoke; font-family: 'Poppins', sans-serif; } img { max-width: 28%; border-radius: 50%; } .container { height: auto; width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 0.25fr 3fr; gap: 3%; padding: 3%; box-sizing: border-box; } .content-left, .content-right { display: flex; align-items: center; justify-content: center; } .slogan { grid-column: span 2; font-size: 1.5em; display: flex; align-items: top; justify-content: center; text-transform: uppercase; letter-spacing: 2px; } .container-form { height: auto; grid-column: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px; // Add space at the bottom } input, textarea, select { border: 2px solid whitesmoke; background-color: rgba(255, 255, 255, 0.1); color: whitesmoke; } input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border: 2px solid red; } input:invalid:focus:not(:placeholder-shown), textarea:invalid:focus:not(:placeholder-shown) { outline: none; } input:invalid:not(:placeholder-shown)::placeholder, textarea:invalid:not(:placeholder-shown)::placeholder { color: red; } #register-form:invalid:not(:placeholder-shown) ~ #popup { display: block; } button, input[type=submit] { margin-top: 20px; padding: 10px 20px; font-size: 1em; transition: background-color 0.3s ease; } button:hover, input[type=submit]:hover { background-color: rgba(255, 255, 255, 0.1); } .form-container { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 20px; width: 100%; max-width: 400px; box-sizing: border-box; } .form-control { background-color: transparent !important; color: whitesmoke !important; border-color: whitesmoke; } .form-control::placeholder { color: rgba(255, 255, 255, 0.7); } .button-container { display: flex; justify-content: space-between; gap: 10px; width: 100%; } #login-button { background-color: transparent; border: 2px solid whitesmoke; color: whitesmoke; } #login-button:hover { background-color: rgba(255, 255, 255, 0.1); }

Le comportement attendu est que le dégradé couvre toujours la totalité de l'écran, y compris le contenu qui n'est pas initialement visible car il faut y faire défiler. Je veux éviter d'avoir deux instances de dégradé. Essentiellement, le dégradé doit s'adapter à la hauteur de l'écran et même à la hauteur du défilement.

J'ai essayé d'utiliser différentes propriétés et valeurs CSS telles que height: auto; min-height: 100% mais celles-ci ne semblent pas fonctionner. J'ai aussi essayé sans répéter, mais cela affiche un rectangle d'écriture. Toute aide serait grandement appréciée ! Voici le code HTML au cas où vous en auriez besoin pour reproduire l'erreur :

            
  
 
  
 
 
Stockify
 
 
 
The smart way
 
 
 
 
 Name:  
 
 Email:  
 
 Phone Number:  
 
 Subscription Plan:  
 
 Password:  
 
 Login  
 
 
 
       

Démontré dans l'extrait de code ci-dessous :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); body { min-height: 100vh; background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100)); color: whitesmoke; font-family: 'Poppins', sans-serif; } img { max-width: 28%; border-radius: 50%; } .container { height: auto; width: 100vw; height: 100vh; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 0.25fr 3fr; gap: 3%; padding: 3%; box-sizing: border-box; } .content-left, .content-right { display: flex; align-items: center; justify-content: center; } .slogan { grid-column: span 2; font-size: 1.5em; display: flex; align-items: top; justify-content: center; text-transform: uppercase; letter-spacing: 2px; } .container-form { height: auto; grid-column: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px; // Add space at the bottom } input, textarea, select { border: 2px solid whitesmoke; background-color: rgba(255, 255, 255, 0.1); color: whitesmoke; } input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border: 2px solid red; } input:invalid:focus:not(:placeholder-shown), textarea:invalid:focus:not(:placeholder-shown) { outline: none; } input:invalid:not(:placeholder-shown)::placeholder, textarea:invalid:not(:placeholder-shown)::placeholder { color: red; } #register-form:invalid:not(:placeholder-shown)~#popup { display: block; } button, input[type=submit] { margin-top: 20px; padding: 10px 20px; font-size: 1em; transition: background-color 0.3s ease; } button:hover, input[type=submit]:hover { background-color: rgba(255, 255, 255, 0.1); } .form-container { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 20px; width: 100%; max-width: 400px; box-sizing: border-box; } .form-control { background-color: transparent !important; color: whitesmoke !important; border-color: whitesmoke; } .form-control::placeholder { color: rgba(255, 255, 255, 0.7); } .button-container { display: flex; justify-content: space-between; gap: 10px; width: 100%; } #login-button { background-color: transparent; border: 2px solid whitesmoke; color: whitesmoke; } #login-button:hover { background-color: rgba(255, 255, 255, 0.1); }

   
 
  
 
 
Stockify
 
 
 
The smart way
 
 
 
 
 Name:  
 
 Email:  
 
 Phone Number:  
 
 Subscription Plan:  
 
 Password:  
 
 Login