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.

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

Rebonjour,

Que pensez-vous de la solution ci-dessous? Est-elle correcte?

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      html {
        min-height: 100%;
        background-image: linear-gradient(to right bottom, #bdf, #024);
      }
    </style>
  </head>     
  <body>
    <p>bla bla...</p><p>bla bla...</p>
  </body>
</html>

**JefReb** · 28/11/2017, 17h50

Ben j'en dit pas grand chose,
Sinon que tu mettes height ou min-height ne change pas grand chose.
Et que tu mettes le fond sur le parent <html> ou sur l'enfant <body> revient à la même chose.

Mais je reconnais que c'est troublant.
Si je donne ce code, et en mettant 2 background différents, qu'en déduis-tu?

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
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>essai</title>
<style type="text/css">
* {
        margin:0;
        padding:0;
}
html {
        height: 100%;
        border:1px solid black;
        background-image: linear-gradient(to right bottom, #bdf, #024);
      }
body    {
        margin:50px;
        background:linear-gradient(to right,#7DB6D9 0%, #001847 100%);
        border:1px solid red;
}
</style>
</head>
<body>
<p>bla bla...</p><p>bla bla...</p>
</body>
</html>

Invité · 28/11/2017, 18h04

Bonjour,

il suffit d'ajouter du contenu (pour remplir en hauteur) pour s'apercevoir que ça ne fonctionnera pas correctement.

Une solution :

Code :

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

1
2
3
4
html {
  min-height:100%;
  background: linear-gradient(to right bottom, #bdf, #024) fixed; /* fixed : ne prend que la hauteur de la fenêtre, pas plus */
}

Une autre solution :

Code html :

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

1
2
  <body>
    <div id="bgfixe"></div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
html,body {
  position:relative; 
}
#bgfixe {
  position:fixed; 
  width:100%;
  height: 100%;
  top:0; left:0; right:0; bottom:0;
  background: #246; /* navigateur ancien */
  background: linear-gradient(to right bottom, #bdf, #024);
  z-index:-1; /* placé en dessous */
}

**JefReb** · 29/11/2017, 08h11

Finalement, Jreau62 apporte une réponse intéressante pour les fonds d'écran, mais cela ne répond pas en définitive à la question de eleydet.
Pourquoi, mettre un height:100% à <html>
Cette solution fonctionne parfaitement et est plus simple que d'utiliser la position fixe.

Code css :

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

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

Mais pourquoi le fond de <body> rempli le <html>

**eleydet** · 29/11/2017, 08h20

Bonjour,

Merci d'abord pour vos réponses.

A JefReb :
Intéressant, ton code. Ce que j'en déduis? Il apporte... un élément de réflexion!

A jreaux62 :
1ère solution : La valeur fixed à la propriété background améliore la présentation des pages ayant un contenu important.
2ème solution : C'est avec un code à peu près équivalent que j'obtenais un dégradé en fond de page.

Entre ces deux solutions, la première est plus simple et élégante. Ceci étant, si la propriété background est habituelle sur le sélecteur body, je ne l'ai jamais rencontré sur le sélecteur html. Pour cette raison, je me demande s'il est correct de procéder ainsi.

**eleydet** · 29/11/2017, 13h58

Rebonjour,

Voici les résultats de quelques tests, effectués avec Firefox. Rien n'est attribué au sélecteur html. Aucune hauteur ou hauteur minimale n'est donc définie. La solution qui fonctionne :

Code :

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

1
2
 
body { background: linear-gradient(to right bottom, #bdf, #024) fixed; }

Les solutions qui ne marchent pas :

Code :

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

1
2
3
4
 
body { background: linear-gradient(to right bottom, #bdf, #024); }             /*Engendre une répétition*/
body { background-image: linear-gradient(to right bottom, #bdf, #024); }       /*Engendre aussi une répétition*/
body { background-image: linear-gradient(to right bottom, #bdf, #024) fixed; } /*Affiche un fond blanc*/

Une conclusion, peut-être, est que "background" doit être préféré à "background-image". En fait, je pensais que ces deux propriétés étaient équivalentes. Ce ne semble pas être le cas.

Invité · 29/11/2017, 14h00

Voir :

Glossaire des propriétés CSS : III. Propriétés de mise en forme d'arrière-plans

**eleydet** · 29/11/2017, 17h16

Bonsoir,

A, ces erreurs de syntaxe... Autre solution qui, bien sûr, fonctionne :

Code :

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

1
2
3
4
body {
  background-image: linear-gradient(to right bottom, #bdf, #024);
  background-attachment: fixed;
}

Merci beaucoup pour votre aide!

Dégradé de couleurs en fond de page.

CSS

Discussions similaires

Partager

Partager