Comment mettre une couleur de fond de page en HTML

Vous êtes en train de créer une page web et vous voudriez changer la couleur de fond de page, rien de plus facile en langage HTML.

Méthode 1

Méthode 1 sur 4:

Bien présenter le code de la couleur d'arrière-plan en HTML

Télécharger l'article

1
Déterminez la couleur d'arrière-plan. Chaque couleur en HTML est identifiée par un code de 6 lettres et chiffres mélangés. Cette codification est accessible sur le site d'apprentissage W3Schools : là un nuancier vous permet de choisir les couleurs qui vous conviennent.
- Sur votre navigateur préféré, rendez-vous sur la page
  https://www.w3schools.com/colors/colors_picker.asp.
- Sur le nuancier Pick a Color (Choisissez une couleur), cliquez sur la couleur qui vous plait.
- Sélectionnez à droite une nuance de cette couleur (Lighter/Darker, soit Plus clair/Plus foncé).
- Relevez le code à droite de la nuance (ex. : #00b33c).
2
Ouvrez le fichier HTML de votre page dans votre éditeur de texte préféré. Depuis l'apparition de HTML5, l'attribut <bgcolor> n'est plus opérationnel. Désormais, la couleur d'arrière-plan est gérée par une propriété CSS ^{[1]XSource de recherche}.
- Avec un PC sous Windows, prenez l'éditeur Notepad ou Notepad++, sur un Mac, Text-Edit Plus, TextEdit ou BBEdit.
3
Rectifiez l'entête de votre document. La couleur d'arrière-plan doit se trouver entre les balises <style> et </style>, lesquelles sont incluses dans les balises <head> et </head> :
Placez le curseur à la fin de la balise <style>, appuyez sur Entrée : les deux balises <style> et </style> sont séparées par une ligne.
5
Insérez la balise d'ouverture <body>. Tapez ce qui suit sur la ligne vide entre <style></style> :
- Toute instruction tapée dans le corps du document (<body>) affectera l'ensemble de la page.
- Passez cette étape si vous voulez créer un dégradé de couleur.
Publicité

Méthode 2

Méthode 2 sur 4:

Paramétrer une couleur d'arrière-plan unie

Télécharger l'article

Cette balise est conventionnellement en haut du document.
2
Insérez la propriété « background-color » dans le corps du document. Tapez background-color: entre les deux accolades de <body>. Vous devez avoir un code qui ressemble exactement à celui qui suit :
- Sans vouloir insister, c'est bien « color » qu'il faut taper et non « couleur ».
3
Affectez une couleur à la propriété « background-color ». À la suite des deux-points, tapez, sans laisser d'espace, le code HTML de la couleur voulue. Pour un fond rose, vous taperiez ce qui suit :
4
Vérifiez ce que vous avez mis entre les balises de style. À ce stade, l'entête de votre document HTML ressemble à ce qui suit :
5
Utilisez « background-color » pour d'autres éléments de votre page. Vous pouvez paramétrer des couleurs d'arrière-plan pour les différents éléments d'une page web. Nous avons attribué une couleur pour le corps du document, vous pouvez le faire aussi pour les entêtes, les paragraphes, etc. Pour une couleur d'arrière-plan pour votre entête principal (<h1>) et pour un paragraphe (<p>), votre code ressemblerait à ceci ^{[2]XSource de recherche} :
Publicité

Méthode 3

Méthode 3 sur 4:

Créer une couleur dégradée en fond de page

Télécharger l'article

Cette balise est conventionnellement en haut du document.
2
Comprenez bien comment fonctionne le dégradé en CSS. Pour faire un dégradé, il y a deux informations à mentionner : la direction et les deux couleurs (début et fin). Vous pouvez indiquer deux couleurs, mais aussi trois, quatre… En premier paramètre, vous pouvez taper une direction et même un angle (en degrés ^{[3]XSource de recherche}).

How.com.vn Français: Step 3 Faites un dégradé vertical.

Par défaut, il sera vertical, c'est-à-dire du haut vers le bas. Voici le code qu'il faut taper, entre les accolades de <body>, pour obtenir un dégradé sur l'arrière-plan du corps du document :

html { min-height: 100 %; }body { background: -webkit-linear-gradient(#216fdb, #C9DCB9); /*Pour Chrome 25, Safari 6 */ background: -o-linear-gradient(#216fdb, #C9DCB9); /*Pour Opera (11.1 à 12.0) */ background: -moz-linear-gradient(#216fdb, #C9DCB9); /*Pour Firefox (3.6 à 15) */ background: linear-gradient(#216fdb, #C9DCB9); /*Autres navigateurs */ background-color: #216fdb; }

Les navigateurs n'interprètent pas tous de la même façon le dégradé de couleur, c'est pourquoi il faut prévoir plusieurs versions de cette fonction.

4
Faites un dégradé orienté. Il n'y a pas que le dégradé vertical, il est facile d'obtenir un dégradé de la droite vers la gauche. Il suffit de rajouter au code précédent un paramètre directionnel dans les parenthèses, à l'image du code ci-dessous ^{[4]XSource de recherche} :
- Pour vous rendre compte de ce que cela donne, modifiez les paramètres (right /droite, left/gauche) et voyez dans votre navigateur l'effet obtenu.
5
Sachez qu'il existe d'autres paramètres de dégradé. Il est possible d'avoir des dégradés linéaires, mais aussi d'autres, radioconcentriques, d'autres elliptiques…
- Le dégradé ne se limite pas à deux seules couleurs, vous pouvez en mettre bien d'autres. Vous pouvez même paramétrer l'épaisseur des bandes de couleur en indiquant le pourcentage de remplissage, aussi appelé « point d'arrêt ». Ci-dessous, le code pour un dégradé vertical, les 10 % du haut sont de la couleur #216fdb, les 60 % suivants sont en #C9DCB9, etc. Faites le test en changeant les couleurs :
  background: linear-gradient(#93B874 10 %, #C9DCB9 70 %, #000000 90 %);
6
Ajoutez de la transparence à vos couleurs. Il est une propriété CSS qui permet de jouer, plus ou moins, sur la transparence d'une couleur. Selon les besoins, vous coderez pour avoir une couleur pleine ou au contraire entièrement transparente, ou une transparence entre les deux : vous devez utiliser la propriété rgba(x, y, z, t). La dernière valeur (l'alpha, ici t) détermine la transparence: 0 pour une totale transparence, 1 pour la couleur pleine et 0.5 pour une transparence moyenne.

How.com.vn Français: Step 7 Relisez votre code une fois fini.

Voyez ci-dessous à quoi ressemble le code complet d'un arrière-plan avec dégradé horizontal entre deux couleurs :

<!DOCTYPE html><html><head><style>html { min-height: 100 %;} body { background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);  background: -o-linear-gradient(right, #216fdb, #C9DCB9); background: -moz-linear-gradient(right, #216fdb, #C9DCB9);  background: linear-gradient(to right, #216fdb, #C9DCB9);  background-color: #216fdb; }</style></head><body></body></html>

Méthode 4

Méthode 4 sur 4:

Créer un fond de page animé

Télécharger l'article

Cette balise est conventionnellement en haut du document.
2
Ajoutez la propriété d'animation dans l'élément <body>. Juste après
body, { tapez la propriété -webkit-animation ou animation comme dans le code ci-dessous ^{[5]XSource de recherche} :
- La première ligne est destinée à être interprétée par les navigateurs fondés sur Chromium (Microsoft Edge, Opera 15.0) et la seconde pour tous les autres navigateurs.
3
Ajoutez des couleurs à votre animation. Pour cela, il faut utiliser la règle @keyframes qui permet de fixer les couleurs d'arrière-plan, la durée d'affichage de telle couleur… Comme précédemment, vous coderez avec les syntaxes adéquates afin que votre programme soit correctement interprété, quel que soit le navigateur. Le code ci-dessous sera bien sûr intégré dans l'élément <body> ^{[6]XSource de recherche} :
- Notez que si le nom de la règle change sensiblement (@-webkit-keyframes et @keyframes) pour que tous les navigateurs interprètent le code de la même façon, les couleurs et les pourcentages restent identiques.
- Les pourcentages (0 %, 25 %…) se calculent par rapport à la durée totale de l'animation, que l'on a ici fixée à 60 secondes (60s). Au chargement de la page (0 %), le fond est turquoise (#33FFF3). Au bout de 15 secondes (25 % de 60 secondes), il passe au lie-de-vin (#7821F), etc.
- Évidemment, vous êtes libre de fixer la durée de l'animation, celles des séquences et les couleurs.

How.com.vn Français: Step 4 Vérifiez votre code.

Voyez ci-dessous à quoi ressemble le code complet d'un arrière-plan avec 5 couleurs qui se succèdent à intervalles de temps réguliers :

<!DOCTYPE html><html><head><style>body { -webkit-animation: colorchange 60s infinite;  animation: colorchange 60s infinite;} @-webkit-keyframes colorchange { 0 % {background: #33FFF3;} 25 % {background: #78281F;} 50 % {background: #117A65;} 75 % {background: #DC7633;} 100 % {background: #9B59B6;}}@keyframes colorchange { 0 % {background: #33FFF3;} 25 % {background: #78281F;} 50 % {background: #117A65;} 75 % {background: #DC7633;} 100 % {background: #9B59B6;}} </style></head><body></body></html>

Conseils

Si vous n'avez besoin que de couleurs simples, vous pouvez remplacer le code HTML par le nom de la couleur (en anglais !), en enlevant le signe # : il en existe 140. Pour un fond orange, vous taperez background-color: orange;, pour un fond magenta foncé, ce sera background-color: darkmagenta;.
Outre une couleur, vous pouvez, en HTML, définir une image en fond de page.

Avertissements

Pour tester votre page web, faites glisser votre fichier HTML sur la fenêtre d'un navigateur Internet et voyez s'il est nécessaire de faire des modifications.