Dégradé CSS

Bonjour,

Je voudrais que ça se mette sur toute la page.

CSS :

div
{
    background-image: linear-gradient(blue, green);
    width: 400px;
    height: 300px;
}

Là, ça fait un carré en bas à gauche; faut mettre combien à width et height pour que ça remplisse toute la page ?

Salut

100% pour les deux!

Quand j'enlève "px" et que je mets 100"%" à la place, ça disparait
Modifié par Max17 (09 Apr 2019 - 17:18)

Hello,

Max17 a écrit :
Quand j'enlève "px" et que je mets 100"%" à la place, ça disparait

Oui parce qu'un div de hauteur 100% se réfère à son parent et si le parent n'a pas de hauteur explicite, le calcul fait zéro.

Utilise les unités de viewport, par exemple :

width: 100vw;
min-height: 100vh;

Modifié par Raphael (10 Apr 2019 - 07:32)

Merci ça marche.

J'ai ça aussi :

body{
    background: -webkit-linear-gradient(left, red, orange, blue); 
    background: -o-linear-gradient(right, red, orange, blue);
    background: -moz-linear-gradient(right, red, orange, blue); 
    background: linear-gradient(to right, red, orange, blue); 
}

Salut,
Pour que ton élément prenne toute la page :

div{
width: 100vw;
height: 100vh;
postition: absolute;
top: 0;
left: 0;
}

Si tu veux que ça se mette dans l'arrière plan :

div{
z-index: -1;
}

Le z-index permet de jouer sur le plan de ton élément.