« Taille » de l'élément html en CSS3

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

J’essaye d’ajouter un gradient en fond de ma page web à l’aide des gradients en CSS3.
Idéalement, j’aimerais que le gradient commence en rouge, se termine en jaune et sans répétitions.

Le problème, c’est que le gradient est répété et j’aimerais éviter cela :

sdf

Comme pour les autres types de dégradés, la valeur obtenue n’est pas une couleur CSS (type <color> mais une image sans dimension intrinsèque. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l’élément auquel elle est appliquée.

https://developer.mozilla.org/fr/docs/Web/CSS/linear-gradient

De ce que j’ai compris, c’est donc la « taille » de l’élément html qui pose problème, comment y remédier ?

Mon code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>paragraphe de texte</p>
</body>
</html>

html {
    background-image: linear-gradient(red, yellow);
}
+0 -0

Cette réponse a aidé l’auteur du sujet

Salut,

Il semblerait que l’élement HTML n’occupe pas la hauteur de l’écran. Le CSS ci-dessous résout le problème.

html {
    background-image: linear-gradient(red, yellow);
    height:100%;
}

Comme je n’y connais presque rien, il y a peut-être des subtilités qui m’échappent cependant.

J’ai testé ici.

+0 -0

J’aurais utilisé min-height: 100% pour être tranquille et éviter de potentiels bugs sur certains navigateurs (notamment sur Android < 5 qui a pas mal de problèmes de scroll).

Mais sinon c’est ça (le rouge et jaune me fait juste mal aux yeux) :)

Édité par viki53

Mes tutos — Architecte technique : JS/Node/Angular/Mongo, PHP/MySQL, AWS — Consultant qualité, ergonomie et UX

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte