Les arrière-plans (back­grounds) HTML peuvent être définis par des valeurs de couleur ou conçus avec un fichier image. En choi­sis­sant le bon arrière-plan, vous améliorez non seulement le design de votre site Web, mais vous ga­ran­tis­sez aussi la li­si­bi­lité de son contenu.

Back­grounds HTML : de quoi s’agit-il exac­te­ment ?

La surface derrière le contenu d’un site Web constitue le back­ground HTML, c’est-à-dire l’arrière-plan. Ces arrière-plans peuvent être choisis par l’uti­li­sa­teur lors de la création de la page en HTML et être modifiés ul­té­rieu­re­ment. Par défaut, les arrière-plans HTML sont en­tiè­re­ment blancs. Il est toutefois re­com­mandé de les modifier, non seulement pour améliorer le design du site Web, mais aussi pour assurer une meilleure vi­si­bi­lité du contenu.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

Que peut-on utiliser comme back­ground HTML ?

Il existe deux méthodes dif­fé­rentes pour créer des arrière-plans HTML :

  • via une valeur de couleur
  • à partir d’une image ou d’un dégradé de couleurs

Les valeurs sont définies via l’attribut HTML style. Vous dé­cou­vri­rez dans les pa­ra­graphes suivants la marche à suivre pour ces deux pos­si­bi­li­tés.

Conseil

Dans notre article séparé, vous en ap­pren­drez plus sur les pos­si­bi­li­tés offertes par HTML style.

Définir une couleur pour les arrière-plans HTML

Pour modifier la couleur des arrière-plans HTML, utilisez l’attribut style et la propriété HTML background-color ou bgcolor. Pour indiquer la valeur de la couleur, vous avez trois options dif­fé­rentes :

  • Nom de la couleur : vous avez la pos­si­bi­lité d’appeler la couleur souhaitée par son nom en anglais. Outre les valeurs standard comme red, yellow ou green, des couleurs spéciales comme lightblue ou deepskyblue sont également possibles. Les ma­jus­cules et les mi­nus­cules n’ont pas d’im­por­tance.
  • Code couleur hexa­dé­ci­mal : vous pouvez définir les couleurs à l’aide de leur code hexa­dé­ci­mal à six chiffres. Celui-ci se compose de trois paires de chiffres de 0 à 9 et de lettres a à f. Les deux premiers ca­rac­tères re­pré­sen­tent la valeur du rouge, les deux suivants celle du vert, et les deux derniers celle du bleu ; la com­bi­nai­son 00 étant la valeur la plus basse et ff la plus élevée. Le bleu serait par con­sé­quent 0000ff.
  • Valeur RGB : enfin, vous pouvez utiliser la valeur RGB, qui est aussi la base du code couleur hexa­dé­ci­mal. Les valeurs se situent dans le spectre 0 à 255 et se réfèrent à nouveau aux couleurs rouge, vert et bleu. La valeur du bleu serait donc RGB (0, 0, 255).

La syntaxe per­met­tant de choisir la couleur de vos arrière-plans HTML se présente comme suit :

<body style="background-color: valeur;">
html

Dans l’exemple suivant, nous utilisons un code couleur hexa­dé­ci­mal pour définir un bleu clair comme couleur d’arrière-plan :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple d’arrière-plan</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Voici votre ligne de titre</h1>
<p>
Voici le contenu de votre site Web.
</p>
</div>
</body>
</html>
html

Le résultat ressemble à ceci :

Image: Arrière-plan HTML : exemple de couleur
Exemple d’arrière-plan HTML en couleur basé sur le code hexa­dé­ci­mal #BFEFFF

Si né­ces­saire, vous pouvez de plus définir les couleurs pour les arrière-plans HTML sé­pa­ré­ment pour les dif­fé­rentes zones de vos sites Web. Pour cela, on utilise également l’attribut style et la propriété HTML background-color. Vous pouvez voir le fonc­tion­ne­ment dans l’exemple suivant, dans lequel dif­fé­rentes couleurs ont été choisies pour l’arrière-plan général ainsi que pour les arrière-plans des titres <h2> et des passages de texte <p> :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple d’arrière-plan</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>L’arrière-plan de ce titre a la valeur de couleur DodgerBlue.</h2>
<p>Cet arrière-plan a la valeur de couleur DarkTurquoise.</p>
</body>
</html>
html
Image: Exemple : trois arrière-plans HTML de couleurs différentes
Exemple d’arrière-plan HTML avec trois couleurs dif­fé­rentes

Définir des images comme back­grounds HTML

Pour pouvoir utiliser des gra­phiques ou des images en back­grounds HTML, il faut qu’ils soient aux formats d’image JPG, PNG, SVG, WebP ou GIF. Dans l’exemple suivant, voici le code né­ces­saire pour l’in­té­gra­tion d’une image en arrière-plan. Bien évi­dem­ment, le chemin vers l’image doit être adapté in­di­vi­duel­le­ment.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple d’arrière-plan</title>
<style>
body { background-image: url('/utilisateur/dossier/assets/arrière-plan/img/image.svg');background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Voici votre titre</h1>
<p>
Voici le contenu de votre site Web.
</p>
</div>
</body>
</html>
html

Lors de l’uti­li­sa­tion d’une image, il est important de garder à l’esprit la li­si­bi­lité du contenu. En indiquant d’autres pa­ra­mètres, vous pouvez à tout moment adapter le po­si­tion­ne­ment de l’image ou du graphique à cet effet.

Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée
Aller au menu principal