1. #1
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 232
    Points : 336
    Points
    336

    Par défaut Dégradé de couleurs en fond de page.

    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.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    6 521
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 6 521
    Points : 10 441
    Points
    10 441

    Par défaut

    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.

  3. #3
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 232
    Points : 336
    Points
    336

    Par défaut

    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.

  4. #4
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    401
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 401
    Points : 529
    Points
    529

    Par défaut

    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>

  5. #5
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 232
    Points : 336
    Points
    336

    Par défaut

    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?

  6. #6
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    401
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 401
    Points : 529
    Points
    529

    Par défaut

    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.

  7. #7
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 232
    Points : 336
    Points
    336

    Par défaut

    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>

  8. #8
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    401
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 401
    Points : 529
    Points
    529

    Par défaut

    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>

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 548
    Points : 21 098
    Points
    21 098

    Par défaut

    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 */
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    401
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 401
    Points : 529
    Points
    529

    Par défaut

    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>

  11. #11
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 232
    Points : 336
    Points
    336

    Par défaut

    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.

  12. #12
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 232
    Points : 336
    Points
    336

    Par défaut

    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.

  13. #13
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 548
    Points : 21 098
    Points
    21 098
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  14. #14
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 232
    Points : 336
    Points
    336

    Par défaut

    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!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 09/08/2017, 17h48
  2. Réponses: 0
    Dernier message: 03/09/2016, 10h55
  3. Réponses: 14
    Dernier message: 24/05/2013, 11h43
  4. Couleur de fond de page
    Par David55 dans le forum BIRT
    Réponses: 2
    Dernier message: 02/06/2011, 16h35
  5. Couleur de fond d’un page qui n’est pas une page mais juste
    Par Furius dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 12/01/2006, 18h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo