Dégradé de couleurs en fond de page.

**eleydet** · 28/11/2017, 11h21

Bonjour,

Je suppose que cette question a déjà été posée précédemment. Veuillez m'en excuser.
Au hasard de mes promenades sur internet, je suis tombé sur une solution pour obtenir, en fond d'écran, un dégradé de couleurs. Le code simplifié est le suivant :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      html { min-height: 100%; }
      body { background-image: linear-gradient(to right bottom, #bdf, #024); }
    </style>
  </head>     
  <body>
    <p>bla bla...</p><p>bla bla...</p>
  </body>
</html>

A votre avis, est-ce la bonne façon d'obtenir un dégradé sur le fond d'une page HTML?

Je suis surpris de rencontrer le style associé au sélecteur html. Je ne comprends pas bien ce qu'il signifie. Y a-t'il d'autres styles pouvant être associé à ce sélecteur particulier? Auriez-vous une documentation sur ce sujet?

Merci par avance pour vos réponses.

**mathieu** · 28/11/2017, 11h48

faites une recherche sur "css linear-gradient" dans votre moteur de recherche préféré et vous trouverez plusieurs sites expliquant les différentes possibilités.

**eleydet** · 28/11/2017, 12h18

Merci, mathieu, pour cette première réponse.

Ma question ne porte pas sur la manière de créer un dégradé de couleurs, mais plutôt sur la manière de l'appliquer sur la totalité de la page. Si j'enlève le sélecteur html dans la feuille de styles, l'effet attendu disparaît.

**JefReb** · 28/11/2017, 12h26

Ben ça me parait evident.
Si tu enlèves html dans la feuille de style, évidemment que l'effet disparait, puisqu'il n'y a plus de hauteur.

En fait non l'effet ne disparait pas mais se répète verticalement.
Il faut donc changer la propriété et ses valeurs.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html { /*min-height: 100%;*/
}
body {
        background: linear-gradient(to right bottom, #bdf, #024) no-repeat;
}
</style>
    </head>
    <body>
<p>bla bla...</p>
<p>bla bla...</p>
</body>
</html>

mais dans ce cas le background ne concerne que la hauteur du contenu.
Donc pour que toute la fenêtre du navigateur soit concernée, il faut mettre une hauteur à <html>
ou délimiter la page à l'intérieur de <body>

**eleydet** · 28/11/2017, 13h24

Rebonjour,

JefReb écrit :

Une page web s'écrit entre <body> et </body>
Si tu veux l'appliquer à toute ta page il faut mettre le linear-gradien sur le <body>
si tu veux que sur le header, l'article ou autre balise tu l'applique sur cette balise.

Tu peux appliquer une règle ou propriétés sur n'importe quelle balise.

Tout cela me paraît évident aussi... quoiqu'il existe plusieurs solutions pour obtenir le dégradé de couleurs sur la page entière.

JefReb écrit aussi :

Si tu enlèves html dans la feuille de style, évidemment que l'effet disparait, puisqu'il n'y a plus de hauteur.

Je ne trouve pas du tout cela évident. Quelle différence y a-t-il entre un style défini sur le sélecteur body et un style défini sur le sélecteur html? Il n'y a plus de hauteur certes, mais de quelle hauteur s'agit-il au juste?

**JefReb** · 28/11/2017, 13h44

En fait je viens de modifier mon post en même temps que ta réponse.
Regardes ce qui se passe si tu mets sans spécifier html:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
html { /*min-height: 100%;*/
}
body {
	height:100%;
	background-image: linear-gradient(to right bottom, #bdf, #024);
}

Il faut donc remonter d'un cran au dessus de <body>, c'est <html> et englobe.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
html { height: 100%;
}
body {
	height:100%;
	background-image: linear-gradient(to right bottom, #bdf, #024);
}

Mais dans ce cas la hauteur de <body> n'a pas d'importance.

Dégradé de couleurs en fond de page.

CSS

Vue hybride

Discussions similaires

Partager

Partager